/*
 * Programme Pages – Stylesheet
 * Theme: Estatika Clean
 * Prefix: .prog-
 */

/* ── CSS Variables ── */
:root {
    --prog-ivory    : #F6F4F1;
    --prog-white    : #FFFFFF;
    --prog-beige    : #EAE6E1;
    --prog-beige2   : #FAF8F5;
    --prog-green    : #7FB13D;
    --prog-gold     : #C7A87A;
    --prog-dark     : #1C1C1A;
    --prog-charcoal : #333333;
    --prog-body     : #4a4a4a;
    --prog-muted    : #888888;
    --prog-radius   : 6px;
    --prog-radius-lg: 14px;
    --prog-shadow   : 0 4px 28px rgba(0,0,0,0.07);
    --prog-shadow-hv: 0 8px 36px rgba(0,0,0,0.13);
    --prog-trans    : all 0.28s ease;
    --prog-py       : 88px;
}

/* ── Base wrapper ── */
.prog-wrap {
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 0 48px;
}

/* ── Eyebrow label ── */
.prog-label {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 10.5px;
    font-weight    : 700;
    letter-spacing : 3.5px;
    text-transform : uppercase;
    color          : var(--prog-gold);
    margin-bottom  : 12px;
}

/* ── Section heading block ── */
.prog-section-hd {
    margin-bottom : 56px;
}
.prog-section-hd--center {
    text-align  : center;
    max-width   : 720px;
    margin-left : auto;
    margin-right: auto;
}
.prog-section-hd h2 {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : clamp(28px, 2.8vw, 40px);
    font-weight : 700;
    color       : var(--prog-charcoal);
    line-height : 1.2;
    margin      : 0 0 14px;
}
.prog-section-hd__sub {
    font-size  : 15px;
    color      : var(--prog-muted);
    line-height: 1.7;
    margin-top : 8px;
}

/* ── Shared buttons ── */
.prog-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    font-family    : 'Inter', sans-serif;
    font-size      : 13.5px;
    font-weight    : 500;
    letter-spacing : 0.5px;
    border-radius  : var(--prog-radius);
    padding        : 14px 28px;
    text-decoration: none;
    cursor         : pointer;
    border         : none;
    transition     : var(--prog-trans);
    white-space    : nowrap;
}
.prog-btn--gold {
    background : var(--prog-gold);
    color      : #fff;
}
.prog-btn--gold:hover {
    background : #b8935e;
    color      : #fff;
}
.prog-btn--outline {
    background : transparent;
    color      : var(--prog-charcoal);
    border     : 1.5px solid var(--prog-charcoal);
}
.prog-btn--outline:hover {
    background : var(--prog-charcoal);
    color      : #fff;
}
.prog-btn--outline-light {
    background : transparent;
    color      : #fff;
    border     : 1.5px solid rgba(255,255,255,0.55);
}
.prog-btn--outline-light:hover {
    background : rgba(255,255,255,0.15);
    color      : #fff;
}
.prog-btn--whatsapp {
    background : #25D366;
    color      : #fff;
}
.prog-btn--whatsapp:hover {
    background : #1da850;
    color      : #fff;
}

/* ── Checkmark icon (shared) ── */
.prog-check {
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    width         : 20px;
    height        : 20px;
    border-radius : 50%;
    background    : rgba(199,168,122,0.15);
    flex-shrink   : 0;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 1: HERO
═══════════════════════════════════════════════════════════════ */
.prog-hero {
    background : var(--prog-ivory);
    padding    : var(--prog-py) 0;
    overflow   : hidden;
}
.prog-hero__inner {
    display        : flex;
    align-items    : center;
    gap            : 72px;
}
.prog-hero__text {
    flex   : 1 1 52%;
    min-width: 0;
}
.prog-hero__visual {
    flex     : 0 0 420px;
    max-width: 420px;
}
.prog-hero__img {
    width        : 100%;
    border-radius: var(--prog-radius-lg);
    object-fit   : cover;
    aspect-ratio : 4 / 5;
    display      : block;
    box-shadow   : var(--prog-shadow);
}
.prog-hero__img-placeholder {
    width        : 100%;
    aspect-ratio : 4 / 5;
    border-radius: var(--prog-radius-lg);
    background   : var(--prog-beige);
}
.prog-hero__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : clamp(32px, 3.5vw, 52px);
    font-weight : 700;
    color       : var(--prog-charcoal);
    line-height : 1.15;
    margin      : 0 0 20px;
}
.prog-hero__sub {
    font-size  : 16px;
    color      : var(--prog-body);
    line-height: 1.75;
    margin     : 0 0 28px;
}
.prog-hero__bullets {
    list-style : none;
    padding    : 0;
    margin     : 0 0 36px;
    display    : flex;
    flex-direction: column;
    gap        : 10px;
}
.prog-hero__bullet {
    display    : flex;
    align-items: flex-start;
    gap        : 10px;
    font-size  : 14.5px;
    color      : var(--prog-body);
    line-height: 1.5;
}
.prog-hero__bullet svg {
    flex-shrink: 0;
    margin-top : 2px;
}
.prog-hero__actions {
    display  : flex;
    flex-wrap: wrap;
    gap      : 12px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 2: OVERVIEW (centred text)
═══════════════════════════════════════════════════════════════ */
.prog-overview {
    padding    : var(--prog-py) 0;
    background : var(--prog-white);
}
.prog-overview__body {
    max-width  : 780px;
    margin     : 0 auto;
    text-align : center;
    font-size  : 15.5px;
    line-height: 1.8;
    color      : var(--prog-body);
}
.prog-overview__body p {
    margin: 0 0 18px;
}
.prog-overview__body p:last-child {
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 3: SUITABLE FOR
═══════════════════════════════════════════════════════════════ */
.prog-suitable {
    padding   : var(--prog-py) 0;
    background: var(--prog-beige2);
}
.prog-suitable__grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 24px;
}
.prog-suitable-card {
    background   : var(--prog-white);
    border-radius: var(--prog-radius);
    padding      : 32px 28px;
    box-shadow   : var(--prog-shadow);
    transition   : var(--prog-trans);
}
.prog-suitable-card:hover {
    transform : translateY(-3px);
    box-shadow: var(--prog-shadow-hv);
}
.prog-suitable-card__icon {
    width           : 44px;
    height          : 44px;
    border-radius   : 50%;
    background      : rgba(199,168,122,0.12);
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin-bottom   : 16px;
}
.prog-suitable-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size  : 17px;
    font-weight: 600;
    color      : var(--prog-charcoal);
    margin     : 0 0 10px;
    line-height: 1.3;
}
.prog-suitable-card__text {
    font-size  : 14px;
    color      : var(--prog-body);
    line-height: 1.65;
    margin     : 0;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4: TECHNOLOGIES
═══════════════════════════════════════════════════════════════ */
.prog-tech {
    padding   : var(--prog-py) 0;
    background: var(--prog-white);
}
.prog-tech__grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 24px;
}
.prog-tech-card {
    border       : 1px solid var(--prog-beige);
    border-radius: var(--prog-radius);
    padding      : 28px 24px 24px;
    display      : flex;
    flex-direction: column;
    transition   : var(--prog-trans);
}
.prog-tech-card:hover {
    border-color: var(--prog-gold);
    box-shadow  : var(--prog-shadow);
    transform   : translateY(-2px);
}
.prog-tech-card__num {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 32px;
    font-weight : 700;
    color       : rgba(199,168,122,0.3);
    line-height : 1;
    margin-bottom: 12px;
}
.prog-tech-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size  : 17px;
    font-weight: 600;
    color      : var(--prog-charcoal);
    margin     : 0 0 10px;
    line-height: 1.3;
}
.prog-tech-card__text {
    font-size   : 14px;
    color       : var(--prog-body);
    line-height : 1.65;
    margin      : 0 0 18px;
    flex        : 1;
}
.prog-tech-card__link {
    font-family    : 'Inter', sans-serif;
    font-size      : 13px;
    font-weight    : 500;
    color          : var(--prog-gold);
    text-decoration: none;
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    margin-top     : auto;
    transition     : var(--prog-trans);
}
.prog-tech-card__link:hover {
    color: #b8935e;
    gap  : 7px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 5: HOW IT WORKS (4-step timeline)
═══════════════════════════════════════════════════════════════ */
.prog-process {
    padding   : var(--prog-py) 0;
    background: var(--prog-ivory);
}
.prog-steps {
    display  : grid;
    grid-template-columns: repeat(4, 1fr);
    gap      : 0;
    list-style: none;
    padding  : 0;
    margin   : 0;
    position : relative;
}
.prog-steps::before {
    content   : '';
    position  : absolute;
    top       : 28px;
    left      : calc(12.5% + 24px);
    right     : calc(12.5% + 24px);
    height    : 2px;
    background: var(--prog-beige);
    z-index   : 0;
}
.prog-step {
    text-align: center;
    padding   : 0 20px;
    position  : relative;
}
.prog-step__dot {
    width           : 56px;
    height          : 56px;
    border-radius   : 50%;
    background      : var(--prog-gold);
    color           : #fff;
    font-family     : 'Playfair Display', Georgia, serif;
    font-size       : 20px;
    font-weight     : 700;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    margin-bottom   : 20px;
    position        : relative;
    z-index         : 1;
    box-shadow      : 0 4px 16px rgba(199,168,122,0.35);
}
.prog-step__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size  : 17px;
    font-weight: 600;
    color      : var(--prog-charcoal);
    margin     : 0 0 10px;
    line-height: 1.3;
}
.prog-step__desc {
    font-size  : 13.5px;
    color      : var(--prog-muted);
    line-height: 1.65;
    margin     : 0;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 6: BENEFITS (two-column)
═══════════════════════════════════════════════════════════════ */
.prog-benefits {
    padding   : var(--prog-py) 0;
    background: var(--prog-white);
}
.prog-benefits__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap    : 48px;
}
.prog-benefits__col-title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : 19px;
    font-weight   : 600;
    color         : var(--prog-charcoal);
    margin        : 0 0 24px;
    padding-bottom: 14px;
    border-bottom : 2px solid var(--prog-beige);
}
.prog-benefits__list {
    list-style : none;
    padding    : 0;
    margin     : 0;
    display    : flex;
    flex-direction: column;
    gap        : 12px;
}
.prog-benefits__item {
    display    : flex;
    align-items: flex-start;
    gap        : 10px;
    font-size  : 14.5px;
    color      : var(--prog-body);
    line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 7: BEFORE & AFTER RESULTS
═══════════════════════════════════════════════════════════════ */
.prog-results {
    padding   : var(--prog-py) 0;
    background: var(--prog-beige2);
}
.prog-results__grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 20px;
}
.prog-result-card__img {
    width        : 100%;
    aspect-ratio : 4 / 5;
    border-radius: var(--prog-radius);
    overflow     : hidden;
    background   : var(--prog-beige);
    box-shadow   : var(--prog-shadow);
}
.prog-result-card__img--empty {
    aspect-ratio : unset;
    height       : 100px;
    opacity      : 0.35;
    box-shadow   : none;
}
.prog-result-card__img img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: transform 0.4s ease;
}
.prog-result-card__img:hover img {
    transform: scale(1.04);
}
.prog-result-card__caption {
    font-size  : 13px;
    color      : var(--prog-muted);
    margin-top : 8px;
    text-align : center;
}


/* ═══════════════════════════════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════════════════════════════ */
.prog-video {
    padding   : var(--prog-py) 0;
    background: var(--prog-beige2);
}
.prog-video__frame {
    position      : relative;
    padding-bottom: 56.25%;
    height        : 0;
    overflow      : hidden;
    border-radius : var(--prog-radius-lg);
    box-shadow    : var(--prog-shadow);
    margin-top    : 40px;
}
.prog-video__frame iframe {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    border  : 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 8: FAQ ACCORDION
═══════════════════════════════════════════════════════════════ */
.prog-faq {
    padding   : var(--prog-py) 0;
    background: var(--prog-white);
}
.prog-faq__list {
    max-width: 820px;
    margin   : 0 auto;
}
.prog-faq__item {
    border-bottom: 1px solid var(--prog-beige);
}
.prog-faq__item:first-child {
    border-top: 1px solid var(--prog-beige);
}
.prog-faq__question {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 16px;
    padding        : 20px 0;
    cursor         : pointer;
    font-family    : 'Inter', sans-serif;
    font-size      : 15px;
    font-weight    : 500;
    color          : var(--prog-charcoal);
    list-style     : none;
    user-select    : none;
}
.prog-faq__question::-webkit-details-marker { display: none; }
.prog-faq__question::after {
    content     : '';
    display     : block;
    width       : 20px;
    height      : 20px;
    flex-shrink : 0;
    background  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C7A87A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
    transition  : transform 0.25s ease;
}
.prog-faq__item[open] .prog-faq__question::after {
    transform: rotate(180deg);
}
.prog-faq__answer {
    padding    : 0 0 20px;
    font-size  : 14.5px;
    color      : var(--prog-body);
    line-height: 1.75;
}
.prog-faq__answer p {
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 9: DARK CTA
═══════════════════════════════════════════════════════════════ */
.prog-cta {
    background : var(--prog-dark);
    padding    : 80px 0;
}
.prog-cta__inner {
    max-width : 760px;
    margin    : 0 auto;
    padding   : 0 48px;
    text-align: center;
}
.prog-cta__heading {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : clamp(28px, 2.8vw, 42px);
    font-weight : 700;
    color       : #fff;
    line-height : 1.2;
    margin      : 0 0 16px;
}
.prog-cta__sub {
    font-size  : 15.5px;
    color      : rgba(255,255,255,0.7);
    line-height: 1.75;
    margin     : 0 0 36px;
}
.prog-cta__actions {
    display  : flex;
    flex-wrap: wrap;
    gap      : 12px;
    justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════
   TABLET  ≤ 1024px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root { --prog-py: 64px; }

    .prog-wrap { padding: 0 32px; }

    .prog-hero__inner { gap: 48px; }
    .prog-hero__visual { flex: 0 0 340px; max-width: 340px; }

    .prog-suitable__grid { grid-template-columns: repeat(2, 1fr); }
    .prog-tech__grid      { grid-template-columns: repeat(2, 1fr); }

    .prog-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
    .prog-steps::before { display: none; }

    .prog-results__grid { grid-template-columns: repeat(2, 1fr); }

    .prog-cta__inner { padding: 0 32px; }

    .prog-overview__body { max-width: 700px; line-height: 1.7; }
    .prog-section-hd__sub { line-height: 1.6; }
    .prog-hero__subtext { line-height: 1.6; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE  ≤ 768px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --prog-py: 52px; }

    .prog-wrap { padding: 0 20px; }

    .prog-hero__inner {
        flex-direction: column;
        gap: 36px;
    }
    .prog-hero__visual { flex: none; max-width: 100%; width: 100%; }
    .prog-hero__img { aspect-ratio: 16 / 9; }
    .prog-hero__img-placeholder { aspect-ratio: 16 / 9; }
    .prog-hero__actions { flex-direction: column; align-items: flex-start; }

    .prog-suitable__grid { grid-template-columns: 1fr; }
    .prog-tech__grid      { grid-template-columns: 1fr; }

    .prog-steps { grid-template-columns: 1fr 1fr; gap: 28px 16px; }

    .prog-benefits__cols { grid-template-columns: 1fr; gap: 32px; }

    .prog-results__grid { grid-template-columns: 1fr 1fr; }

    .prog-cta { padding: 56px 0; }
    .prog-cta__inner { padding: 0 20px; }

    .prog-section-hd { margin-bottom: 40px; }
}


/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 480px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root { --prog-py: 44px; }

    .prog-steps { grid-template-columns: 1fr; }
    .prog-results__grid { grid-template-columns: 1fr; }

    .prog-cta { padding: 40px 0; }
    .prog-btn { width: 100%; justify-content: center; }
    .prog-hero__actions { flex-direction: column; }
}