/*
Theme Name: Smart Alpaka
Text Domain:
Version: 0.15
Description: Strona przygotowana dla Fundacji Smart Alpaka
Tags:
Author: FAST llama - Bartłomiej Werewka
Author URI: https://fastllama.pl
*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

/* =========================
   Zmienne i podstawy
========================= */
:root {
    --bg-color: #ffffff;
    --font-family-main: Montserrat;
    --font-muted: #BEBBAC;
    --font-primary: #FD67C5;
    --font-light: #ffffff;
    --font-dark: #474747;
    --font-bluey: #004AAD;
    --main-gold-color: rgba(237, 188, 90, 1);

    --color-blue: #004AAD;
    --color-pink: #d656d0;
    --color-purple: #8331a6;

    --news-overlay-bg: rgba(0, 0, 0, 0.5); /* tło pod tekstem */
    --news-title-color: #fff;
    --news-excerpt-color: #ddd;

    font-size: 16pt;
}

html, body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    /*background: var(--bg-color);*/
    font-family: var(--font-family-main), 'sans-serif';
}

/* =========================
   Sekcja hero
========================= */
#hero-front {
    height: 100vh;
    width: auto;
    position: relative;
    overflow: hidden;
    background: var(--bg-color);
    contain: paint; /* drobny boost wydajności */
}

.content-layer { z-index: 1; }

.hero-alpaka-text {
    color: var(--font-muted);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =========================
   Dekoracje (kółka + paski)
========================= */
/* Baza dla wszystkich dekoracji */
.bg-circle, .bg-bar {
    position: absolute;
    z-index: 0;
    opacity: .85;
    pointer-events: none;
    will-change: transform;
    /* bazowy stan: tylko paralaksa */
    transform: translateY(var(--parallaxY, 0px));
}

/* Domyślne rozmiary (gdy brak modyfikatora) */
.bg-circle { width: 40px; height: 40px; border-radius: 50%; }
.bg-bar    { width: 200px; height: 30px; border-radius: 999px; }

/* Modyfikatory rozmiaru — większa specyficzność, żeby nie nadpisała ich baza */
.bg-circle.circle-sm { width: 36px;  height: 36px; }
.bg-circle.circle-lg { width: 110px; height: 110px; }

.bg-bar.bar-md { width: 260px; height: 36px; }
.bg-bar.bar-lg { width: 420px; height: 36px; }

/* Kolory */
.bg-circle.pink   { background: var(--color-pink); }
.bg-circle.blue   { background: var(--color-blue); }
.bg-circle.purple { background: var(--color-purple); }

.bg-bar.pink { background: var(--color-pink); }
.bg-bar.blue { background: var(--color-blue); }

/* =========================
   Animacje pływania
========================= */
@keyframes float {
    0%   { transform: translateY(var(--parallaxY, 0px)); }
    50%  { transform: translateY(calc(var(--parallaxY, 0px) - 15px)); }
    100% { transform: translateY(var(--parallaxY, 0px)); }
}

.float      { animation: float 5s ease-in-out infinite; }
.float-slow { animation: float 12s ease-in-out infinite; }


/* =========================
   Preferencje dostępności
========================= */
@media (prefers-reduced-motion: reduce) {
    .float, .float-slow { animation: none !important; }
    #hero-front [data-parallax] { --parallaxY: 0px !important; }
}

/* =========================
   Responsywność
========================= */
@media (max-width: 992px) {
    .bg-circle.circle-lg { width: 90px; height: 90px; }
    .bg-bar.bar-lg { width: 340px; height: 32px; }
    .bg-bar.bar-md { width: 220px; height: 30px; }
}

@media (max-width: 576px) {
    .bg-circle.circle-lg { width: 72px; height: 72px; }
    .bg-bar.bar-lg { width: 280px; }
    .bg-bar.bar-md { width: 180px; }
    /* Opcjonalnie: przerzedzenie prawego dołu, jeśli za gęsto */
    /* #hero-front .bg-bar.bar-md[style*="right:13%"] { display:none; } */
}

#single-background {
    background-color: #ffffffc7;
}


#lp-logo {
    max-height: 100px;
}

/* Sekcja */
#news{

    display:block;
    padding-top:24px;
    padding-bottom:24px;
}

.section-title{
    color:var(--font-bluey);
    font-weight:700;
    font-size:clamp(18px,2.2vw,22px);
    margin:0 0 8px;
}

/* Siatka 3 kolumny na desktopie, 1 kolumna na mobile – BEZ odstępów */
.news-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:0;
    height: 500px;
}

/* Karta wpisu – tło z obrazka wyróżniającego */
.news-card {
    position: relative;
    display:block;
    height: 100%;                 /* OK tylko gdy .news-grid ma stałą wysokość */
    background-size:cover;
    background-position:center;
    text-decoration:none;
    color:#fff;
    border:0;
    border-radius:0;
    overflow:hidden;
    transition: transform .25s ease;
}
.news-card:focus-visible{
    outline:2px solid var(--color-blue);
    outline-offset:2px;
}
.news-card:hover{
    /*transform: translateY(-2px);*/
}

/* RÓŻOWY overlay – na starcie pokazuje tytuł + fragment zajawki */
.news-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    background: rgba(207,120,203,.85);   /* róż jak w projekcie */
    padding:16px 18px;
    height:42%;                           /* widoczny pasek z zajawką */
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    row-gap:8px;
    transition: height .35s ease, padding .35s ease;
    z-index:1;
}

.news-title{
    margin:0;
    font-size:clamp(16px,1.6vw,18px);
    font-weight:700;
    line-height:1.25;
}

/* Zajawka – widoczna od razu (2–3 linie) + delikatny fade do dołu */
.news-excerpt{
    font-size:clamp(13px,1.2vw,14px);
    line-height:1.4;
    overflow:hidden;
    max-height: 3.9em;  /* ~3 linie przy line-height:1.4 */
    transition:max-height .35s ease;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.05));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.05));
}

/* CTA – pokazuje się dopiero po hoverze */
.news-cta{
    align-self:flex-start;
    margin-top:6px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(63,79,187,.95);      /* niebieski */
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.02em;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
}

/* HOVER – overlay do pełnej wysokości, zajawka się rozwija, CTA wchodzi */
.news-card:hover .news-overlay,
.news-card:focus-visible .news-overlay{
    height:100%;
    padding:22px 20px;
}

.news-card:hover .news-excerpt,
.news-card:focus-visible .news-excerpt{
    max-height: 100vh;
    -webkit-mask-image:none;
    mask-image:none;
}

.news-card:hover .news-cta,
.news-card:focus-visible .news-cta{
    opacity:1;
    transform:translateY(0);
}



/* Przyciski */
.btn-news-more{
    padding:.6rem 1.1rem;
    border-radius:999px;
}

/* Responsywność */
@media (max-width: 991.98px){
    .news-grid{
        grid-template-columns:1fr;   /* jedna kolumna */
        height:auto;                 /* tu wcześniej wszystko znikało */
    }
    .news-card{
        height:auto;                 /* nie 100% ! */
        aspect-ratio: 16 / 9;        /* proporcje karty */
        min-height: 280px;           /* bezpieczny fallback */
    }
}

section {
    box-sizing: border-box;
}

.section-heading-row {
    padding: 50px 0;
}



section {
    box-sizing: border-box;
    padding: 20px 40px;
}

section#news {
    padding: unset;
}

.section-heading-row {
    padding: 50px 0;
}

hr.instruction {
    border-top: 1px solid var(--font-bluey);
    opacity: 1;
    width: 100%;
    margin-top: 40px;
}

.instruction-row {
    margin-top: 80px;
    color: var(--font-bluey)
}

section#divider-left, section#divider-right {
    padding: 0;
    margin: 50px 0;
}

.divider-bar-left {
    width: 250px;
    height: 80px;
    border-radius: 0 999px 999px 0;
    background-color: var(--font-bluey);
}

.divider-circle-left {

}


#contact {
    display: flex;
    align-items: center;
    justify-items: center;
}

#contact-card {

    border: 1px solid var(--font-bluey);
    border-radius: 50px;
    padding: 30px;
    position: relative;
    display: inline-block;
}

#contact-card::before {
    content: '';
    width: 100px;
    height: 40px;
    background-color: var(--font-bluey);
    border-radius: 50px;
    position: absolute;
    top: -20px;
    right: 0;
}

#contact-card::after {
    content: '';
    width: 100px;
    height: 40px;
    background-color: var(--font-bluey);
    border-radius: 50px;
    position: absolute;
    bottom: -10px;
    left: 0;
}

.i-center {
    justify-content: center;
}


.wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
    border: 1px solid var(--font-bluey);
    border-radius: 15px;
    padding: 10px
}


#dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* żeby było pod treścią */
    overflow: hidden;
    background: white;
}

.shape {
    position: absolute;
    opacity: 0.9;
}
.circle {
    border-radius: 50%;
}
.rect {
    border-radius: 25px;
}

#dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* żeby było pod treścią */
    overflow: hidden;
    background: white;
}

.shape {
    position: absolute;
    opacity: 0.9;
}
.circle {
    border-radius: 50%;
}
.rect {
    border-radius: 25px;
}