@charset "utf-8";
/* Age category color scheme */
        :root {
            --prescolar-color: #e76f51;
            --primar-color: #2d9e69;
            --gimnaziu-color: #2a7ab8;
            --liceu-color: #7c3fb5;
        }

        /* Page header gradient */
        .oferte-header {
            position: relative;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8rem 2rem 7rem;
            text-align: center;
            /* Imaginea vine din câmpul glob_oferte_hero_bg, pusă inline în
               archive-camp.php (itemul 38). Aici rămâne doar voalul, ca textul
               alb să fie lizibil chiar dacă imaginea întârzie să se încarce. */
            background-color: #1b4332;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .oferte-header h1 {
            color: var(--white);
            font-size: 3.5rem;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .oferte-header p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1.15rem;
            max-width: 620px;
            margin: 1rem auto 0;
        }

        .page-wave {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }

        .page-wave svg {
            display: block;
            width: calc(100% + 1.3px);
            height: 80px;
        }

        /* Category anchor tabs */
        .category-tabs {
            position: sticky;
            top: 68px;
            z-index: 100;
            background: var(--white);
            border-bottom: 1px solid rgba(45, 30, 15, 0.06);
            box-shadow: 0 4px 15px rgba(45, 30, 15, 0.06);
        }

        .tabs-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            gap: 0;
            overflow-x: auto;
        }

        .tab-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 1.5rem;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-muted);
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            transition: all 0.25s ease;
        }

        .tab-link:hover {
            color: var(--primary);
            background: var(--bg-light);
        }

        .tab-link.tab-prescolar:hover,
        .tab-link.tab-prescolar.active { border-color: var(--prescolar-color); color: var(--prescolar-color); }
        .tab-link.tab-primar:hover,
        .tab-link.tab-primar.active { border-color: var(--primar-color); color: var(--primar-color); }
        .tab-link.tab-gimnaziu:hover,
        .tab-link.tab-gimnaziu.active { border-color: var(--gimnaziu-color); color: var(--gimnaziu-color); }
        .tab-link.tab-liceu:hover,
        .tab-link.tab-liceu.active { border-color: var(--liceu-color); color: var(--liceu-color); }

        /* Age section wrapper */
        .age-section {
            padding: 5rem 0 3rem;
        }

        .age-section.alt {
            background: var(--bg-light);
        }

        /* Section header with colored accent */
        .age-section-header {
            display: flex;
            align-items: flex-end;
            gap: 1.5rem;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 2px solid;
        }

        .age-section-header.prescolar { border-color: var(--prescolar-color); }
        .age-section-header.primar { border-color: var(--primar-color); }
        .age-section-header.gimnaziu { border-color: var(--gimnaziu-color); }
        .age-section-header.liceu { border-color: var(--liceu-color); }

        .age-emoji { font-size: 3rem; line-height: 1; }

        .age-header-text h2 {
            font-size: 2rem;
            margin-bottom: 0.3rem;
        }

        .age-header-text p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .age-badge-pill {
            display: inline-block;
            padding: 0.4rem 1.2rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--white);
            margin-left: auto;
            white-space: nowrap;
        }

        .pill-prescolar { background: var(--prescolar-color); }
        .pill-primar { background: var(--primar-color); }
        .pill-gimnaziu { background: var(--gimnaziu-color); }
        .pill-liceu { background: var(--liceu-color); }

        /* Program cards grid */
        .program-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
            gap: 2rem;
        }

        .prog-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            transition: all 0.35s ease;
            display: flex;
            flex-direction: column;
            border-top: 4px solid transparent;
        }

        .prog-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .prog-card.prescolar { border-top-color: var(--prescolar-color); }
        .prog-card.primar { border-top-color: var(--primar-color); }
        .prog-card.gimnaziu { border-top-color: var(--gimnaziu-color); }
        .prog-card.liceu { border-top-color: var(--liceu-color); }

        .prog-card-img {
            height: 180px;
            overflow: hidden;
            background: var(--bg-light);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .prog-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .prog-card:hover .prog-card-img img {
            transform: scale(1.06);
        }

        .prog-card-emoji {
            font-size: 3.5rem;
        }

        .prog-card-body {
            padding: 1.8rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .prog-tag {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0.25rem 0.8rem;
            border-radius: 50px;
            margin-bottom: 0.8rem;
        }

        .prog-tag.prescolar { background: rgba(231, 111, 81, 0.12); color: var(--prescolar-color); }
        .prog-tag.primar { background: rgba(45, 158, 105, 0.12); color: var(--primar-color); }
        .prog-tag.gimnaziu { background: rgba(42, 122, 184, 0.12); color: var(--gimnaziu-color); }
        .prog-tag.liceu { background: rgba(124, 63, 181, 0.12); color: var(--liceu-color); }

        .prog-card-body h2,
            .prog-card-body h3 {
            font-size: 1.2rem;
            color: var(--primary-dark);
            margin-bottom: 0.7rem;
            line-height: 1.3;
        }

        .prog-card-body p {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.7;
            flex: 1;
            margin-bottom: 1.5rem;
        }

        .prog-card-meta {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin-bottom: 1.2rem;
        }

        .meta-chip {
            font-size: 0.78rem;
            color: var(--text-muted);
            background: var(--bg-light);
            padding: 0.3rem 0.7rem;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .prog-card-link {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            gap: 0.4rem;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--primary);
            transition: all 0.2s ease;
        }

        .prog-card-link:hover {
            gap: 0.7rem;
            color: var(--accent);
        }

        .prog-card-link.prescolar:hover { color: var(--prescolar-color); }
        .prog-card-link.primar:hover { color: var(--primar-color); }
        .prog-card-link.gimnaziu:hover { color: var(--gimnaziu-color); }
        .prog-card-link.liceu:hover { color: var(--liceu-color); }

        /* Pricing banner */
        .pricing-banner {
            background: var(--primary-dark);
            padding: 4rem 0;
            text-align: center;
        }

        .pricing-banner h2 {
            color: var(--white);
            font-size: 2rem;
            margin-bottom: 0.8rem;
        }

        .pricing-banner p {
            color: rgba(255, 255, 255, 0.75);
            font-size: 1rem;
            max-width: 560px;
            margin: 0 auto 2rem;
        }

        .price-chips {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 2.5rem;
        }

        .price-chip {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: var(--white);
            padding: 1rem 1.8rem;
            border-radius: var(--radius-md);
            text-align: center;
            min-width: 140px;
        }

        .price-chip strong {
            display: block;
            font-size: 1.6rem;
            font-family: var(--font-heading);
            margin-bottom: 0.2rem;
        }

        .price-chip span {
            font-size: 0.82rem;
            opacity: 0.7;
        }

        /* CTA section */
        .oferte-cta {
            padding: 6rem 0;
            background: linear-gradient(135deg, #1b4332, #2d6a4f);
            text-align: center;
        }

        .oferte-cta h2 {
            color: var(--white);
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .oferte-cta p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1.1rem;
            max-width: 550px;
            margin: 0 auto 2.5rem;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-white {
            display: inline-block;
            background: var(--white);
            color: var(--primary-dark);
            padding: 0.9rem 2rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .btn-white:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        }

        .btn-outline-white {
            display: inline-block;
            border: 2px solid rgba(255, 255, 255, 0.7);
            color: var(--white);
            padding: 0.85rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .btn-outline-white:hover {
            transform: translateY(-2px); background: rgba(255,255,255,0.15);
            border-color: var(--white);
        }

        /* Coming soon badge */
        .coming-soon-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(0, 0, 0, 0.6);
            color: var(--white);
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
        }

        .prog-card-img { position: relative; }

        @media (max-width: 768px) {
            .oferte-header h1 { font-size: 2.4rem; }
            .tabs-inner { gap: 0; }
            .tab-link { padding: 1rem 1rem; font-size: 0.88rem; }
            .age-section-header { flex-wrap: wrap; }
            .age-badge-pill { margin-left: 0; }
        }
    
        /* ── Hero standard v2 ── */
        .oferte-header .badge { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); }
        .hero-cta-std { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }
        .scroll-cue-std { position: absolute; bottom: 4.5rem; left: 50%; color: rgba(255, 255, 255, 0.7); font-size: 1.5rem; animation: cueBounceStd 2s infinite; z-index: 2; }
        @keyframes cueBounceStd { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }
        /* ── Itemul 52: „Tematici la cerere", ultima secțiune de conținut ──
           Fundal alternant: secțiunea broșurii de deasupra e pe --bg-light, asta e pe
           --bg-main. Grila e tiparul de flex al site-ului (ca .obj-grid de pe paginile
           de tabără): bază fixă pe coloană + justify-content:center, deci ultimul rând
           incomplet rămâne centrat. Cu cinci chenare iese 3+2 pe desktop, 2+2+1 pe
           tabletă, 1 pe coloană pe telefon, fără niciun rând orfan lipit la stânga.
           Chenarele NU sunt clickabile: fără cursor:pointer și fără efect la hover,
           ca să nu pară butoane. */
        .la-cerere {
            background: var(--bg-main);
            padding: 5rem 0;
            text-align: center;
            /* Ancora /oferte/#la-cerere e făcută ca să fie trimisă prin email, deci
               trebuie să aterizeze CU titlul la vedere. Fără asta, saltul aliniază
               secțiunea la marginea de sus a ferestrei, iar bara lipicioasă cu grupele
               de vârstă (care coboară până la ~128px) acoperă exact supratitlul și
               titlul. Măsurat: titlul ajungea la 112px, sub bară. */
            scroll-margin-top: 150px;
        }

        .la-cerere-titlu {
            font-size: 2rem;
            margin-bottom: 0.8rem;
        }

        .la-cerere-intro {
            color: var(--text-muted);
            max-width: 680px;
            margin: 0 auto 3rem;
            line-height: 1.7;
        }

        .la-cerere-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .la-cerere-grid > .la-cerere-card {
            flex: 0 0 calc((100% - 3rem) / 3);
        }

        .la-cerere-card {
            background: var(--white);
            border-radius: var(--radius-md);
            border-left: 4px solid var(--accent);
            box-shadow: var(--shadow-sm);
            padding: 1.8rem 1.6rem;
            text-align: left;
            /* Înălțimi egale pe rând (itemul 13): elementele de flex se întind implicit,
               iar coloana internă împinge subtitlul în jos, nu lasă titlul să plutească. */
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .la-cerere-emoji {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: 0.3rem;
        }

        .la-cerere-card-titlu {
            font-size: 1.15rem;
            margin: 0;
            color: var(--primary-dark);
        }

        .la-cerere-card-text {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .la-cerere-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem 1.2rem;
            margin-top: 3rem;
        }

        .la-cerere-btn {
            font-size: 1rem;
            padding: 0.9rem 2.2rem;
        }

        .la-cerere-btn:focus-visible {
            outline: 3px solid var(--primary-dark);
            outline-offset: 3px;
        }

        /* Bulă pur decorativă, cu codița spre buton. `aria-hidden` în șablon. */
        .la-cerere-bula {
            position: relative;
            background: var(--white);
            border: 1px solid #d9cec0;
            border-radius: var(--radius-md);
            padding: 0.6rem 1rem;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--primary);
            box-shadow: var(--shadow-sm);
        }

        .la-cerere-bula::before {
            content: "";
            position: absolute;
            left: -7px;
            top: 50%;
            transform: translateY(-50%);
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-right: 7px solid #d9cec0;
        }

        .la-cerere-bula::after {
            content: "";
            position: absolute;
            left: -6px;
            top: 50%;
            transform: translateY(-50%);
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 6px solid var(--white);
        }

        @media (max-width: 900px) {
            .la-cerere-grid > .la-cerere-card { flex-basis: calc((100% - 1.5rem) / 2); }
        }

        @media (max-width: 600px) {
            .la-cerere { padding: 3.5rem 0; }
            .la-cerere-grid > .la-cerere-card { flex-basis: 100%; }
            .la-cerere-titlu { font-size: 1.7rem; }
            /* Pe telefon bula trece sub buton, cu codița în sus, nu în stânga. */
            .la-cerere-bula::before { left: 50%; top: -7px; transform: translateX(-50%); border: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #d9cec0; }
            .la-cerere-bula::after { left: 50%; top: -6px; transform: translateX(-50%); border: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--white); }
        }