/* ==========================================================================
   Fundacja Good Vibe — podstrona projektu "Pomorze Zachodnie – Silne NGO"
   Colours sampled from the foundation's key visual (img/tlo-hero.png)
   ========================================================================== */

:root {
    --navy:        #302f7a;   /* deep blue from the key visual        */
    --blue:        #423fa0;   /* main brand blue                      */
    --blue-mid:    #4f6bc0;
    --blue-light:  #4b8fd4;
    --teal:        #7fb3c0;   /* the birds                            */
    --orange:      #f26a21;   /* dancing figures — accent colour      */
    --ink:         #14142b;   /* body text                            */
    --ink-soft:    #4a4a63;
    --paper:       #ffffff;
    --paper-tint:  #f4f6fc;

    --wrap:        1160px;
    --wrap-narrow: 820px;
    --radius:      20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* height:auto is required because every <img> carries width/height attributes
   (they reserve space so the layout doesn't jump while images load). Without
   it, CSS sets the width but the height stays at the attribute value and the
   image stretches. */
img { max-width: 100%; height: auto; display: block; }

.container {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 24px;
}

.container--narrow { max-width: var(--wrap-narrow); }


/* ===== HERO ================================================================ */

.hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background: var(--blue) url('img/tlo-hero.png') center / cover no-repeat;
    overflow: hidden;
}

/* Scrim: the key visual is busy, so text needs a darkened layer underneath */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(20, 20, 60, 0.20) 0%,
                rgba(20, 20, 60, 0.52) 45%,
                rgba(20, 20, 60, 0.80) 100%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-block: 100px 80px;
}

.hero__logo {
    width: 132px;
    height: auto;
    margin: 0 auto 32px;
}

/* On the project page the logo doubles as a link back to the home page */
.hero__logo-link {
    display: block;
    transition: transform 0.2s ease;
}

.hero__logo-link:hover { transform: translateY(-3px); }

.hero__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 100px;
    padding: 9px 22px;
    margin-bottom: 28px;
    backdrop-filter: blur(6px);
}

.hero__title {
    font-size: clamp(2.1rem, 6.6vw, 5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
    /* balance evens out line lengths instead of leaving a short orphan line —
       centred text with ragged lines is what reads as "floating" on phones */
    text-wrap: balance;
}

.hero__title-accent { color: var(--orange); }

.hero__lead {
    max-width: 640px;
    margin: 26px auto 0;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
    text-wrap: pretty;
}


/* ===== HERO STRONY GŁÓWNEJ ================================================= */

/* The home page is a single full-screen hero holding every element, so the
   type and spacing are tighter here than on the project page.
   svh = "small viewport height": on phones it ignores the browser's collapsing
   address bar, which otherwise makes 100vh taller than the visible screen.
   min-height (not height) lets the section grow if a short window can't fit
   the content — better a little scrolling than a clipped button. */
.hero--home {
    min-height: 100vh;
    min-height: 100svh;
}

.hero--home .hero__inner { padding-block: 48px; }

.hero--home .hero__title {
    font-size: clamp(1.9rem, 5.2vw, 3.5rem);
    margin-bottom: 18px;
}

.hero--home .hero__lead {
    max-width: 560px;
    margin-top: 0;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.hero__logo--lg { width: clamp(104px, 11vw, 132px); margin-bottom: 26px; }

/* White plate for the EU logotypes — the PNG has no transparency and the
   captions are dark, so they need a light background to stay legible */
.hero__logotypes {
    background: #fff;
    border-radius: 16px;
    padding: 18px 24px;
    margin: 36px auto 32px;
    max-width: 620px;
    box-shadow: 0 14px 36px rgba(10, 10, 40, 0.28);
}

.hero__copy {
    margin-top: 32px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}


/* ===== PRZYCISKI =========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 100px;
    padding: 20px 38px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn--primary {
    color: #fff;
    background: var(--orange);
    box-shadow: 0 12px 30px rgba(242, 106, 33, 0.32);
}

.btn--primary:hover {
    background: #d95a15;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(242, 106, 33, 0.40);
}

.btn__arrow { transition: transform 0.2s ease; }

.btn:hover .btn__arrow { transform: translateX(4px); }


/* ===== SEKCJE ============================================================== */

.section { padding-block: 96px; }

.section--tinted { background: var(--paper-tint); }

.section-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 20px;
}

.lead {
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    color: var(--ink-soft);
    /* Orange rule on the left marks this as the official project description */
    border-left: 4px solid var(--orange);
    padding-left: 28px;
}


/* ===== KARTY DZIAŁAŃ ======================================================= */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.card {
    position: relative;
    background: var(--paper);
    border: 1px solid #e3e7f5;
    border-radius: var(--radius);
    padding: 40px 34px 34px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(48, 47, 122, 0.13);
}

.card__num {
    position: absolute;
    top: 26px;
    right: 30px;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(66, 63, 160, 0.10);
}

.card__title {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 14px;
    padding-right: 70px;
    text-wrap: balance;
}

.card__text {
    font-size: 1rem;
    color: var(--ink-soft);
}


/* ===== KWOTA GRANTU ======================================================== */

.grant { padding-block: 0 96px; background: var(--paper-tint); }

.grant__box {
    background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 55%, var(--blue-mid) 100%);
    border-radius: var(--radius);
    padding: 56px 40px;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 50px rgba(48, 47, 122, 0.28);
}

.grant__label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 14px;
    text-wrap: balance;
}

.grant__amount {
    font-size: clamp(2.6rem, 8vw, 4.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--orange);
}


/* ===== PASEK LOGOTYPÓW ===================================================== */

/* EU visual-identity rules: logo strip must sit on a plain white background */
.logotypes {
    background: #fff;
    padding-block: 56px;
    border-top: 1px solid #e6e9f2;
}

.logotypes__scroll { overflow-x: auto; }

.logotypes__img {
    width: 100%;
    max-width: 900px;
    /* Below this width the logotype captions stop being legible, so on narrow
       screens the strip scrolls sideways instead of shrinking further */
    min-width: 560px;
    height: auto;
    margin-inline: auto;
}


/* ===== IKONY SOCIAL (wspólne dla obu stron) ================================ */

/* The icon files are white artwork, so this component only works on dark
   backgrounds — the hero scrim and the navy footer */
.social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.social__link {
    display: block;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.social__link:hover { opacity: 1; transform: translateY(-3px); }

.social__link img { width: 40px; height: 40px; }

/* Patronite is a wordmark, not a square icon — it needs its own proportions */
.social__link--wide img { width: auto; height: 30px; }

.social--hero { margin-top: 40px; }


/* ===== STOPKA ============================================================== */

.footer {
    background: var(--navy);
    color: #fff;
    padding-block: 64px 44px;
}

.footer__inner { text-align: center; }

.footer__logo { width: 84px; margin: 0 auto 16px; }

.footer__tagline {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 32px;
}

.footer .social { margin-bottom: 36px; }

.footer__copy {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    padding-top: 26px;
}


/* ===== RESPONSYWNOŚĆ ======================================================= */

@media (max-width: 640px) {
    /* Only the project-page hero may shrink on phones. :not() is required —
       a plain .hero rule sits later in the file and would override the home
       hero's 100svh, leaving a gap under it */
    .hero:not(.hero--home) { min-height: auto; }
    .hero__inner { padding-block: 76px 64px; }
    .hero--home .hero__inner { padding-block: 40px 32px; }
    .hero__logo { width: 100px; }
    .hero__logotypes { padding: 14px 16px; margin: 28px auto 26px; }
    /* Keep the button label on one line — a wrapped label leaves the arrow
       floating beside a two-line block and looks broken */
    .btn { font-size: 0.95rem; padding: 18px 24px; gap: 10px; }
    .section { padding-block: 64px; }
    .grant { padding-block: 0 64px; }
    .grant__box { padding: 40px 24px; }
    .lead { padding-left: 20px; font-size: 1.05rem; }
    .hero__lead { font-size: 1rem; max-width: 320px; text-wrap: balance; }

    /* The label is too long to stay on one line on a phone, and a two-line
       pill stretched edge to edge reads as a banner, not a badge. Dropping the
       frame turns it into a plain caption, which is what it actually is. */
    .hero__eyebrow {
        background: none;
        border: none;
        backdrop-filter: none;
        padding: 0;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 20px;
        max-width: 280px;
        text-wrap: balance;
    }

    /* Cards: on a narrow card the big corner number sits in the same band as
       the heading and collides as soon as the heading wraps. On phones it
       moves above the title in normal flow, where it can never overlap. */
    .card { padding: 26px 24px 28px; }

    .card__num {
        position: static;
        display: block;
        font-size: 1.5rem;
        color: rgba(66, 63, 160, 0.28);
        margin-bottom: 6px;
    }

    .card__title { padding-right: 0; font-size: 1.2rem; }

    /* Without a frame the sideways-scrolling strip just looks cut off at the
       screen edge. The border makes it read as a box you can scroll. */
    .logotypes { padding-block: 40px; }

    .logotypes .logotypes__scroll {
        border: 1px solid #e0e5f2;
        border-radius: 14px;
        padding: 16px;
    }
}

/* Short windows (small laptops, browser with many toolbars): the home hero
   holds a lot, so everything tightens up rather than pushing the button
   below the fold. Phones are excluded — they get the rules above. */
@media (min-width: 641px) and (max-height: 800px) {
    .hero--home .hero__inner { padding-block: 28px; }
    .hero--home .hero__logo--lg { width: 88px; margin-bottom: 16px; }
    .hero--home .hero__title { font-size: clamp(1.8rem, 3.4vw, 2.3rem); margin-bottom: 12px; }
    .hero--home .hero__lead { font-size: 0.98rem; }
    .hero--home .social--hero { margin-top: 24px; }
    /* Padding and margins shrink, but NOT max-width: the panel must stay wide
       enough for the strip's 560px legibility floor, or the last logo clips */
    .hero--home .hero__logotypes {
        padding: 14px 20px;
        margin: 24px auto 22px;
    }
    .hero--home .btn { padding: 16px 30px; }
    .hero--home .hero__copy { margin-top: 20px; }
}

/* Respect the visitor's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card, .social__link, .btn, .btn__arrow, .hero__logo-link { transition: none; }
}