/*
 * Pricing Page – Stylesheet
 * Loaded only on pages using template-pricing.php
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS  (same brand palette)
═══════════════════════════════════════════ */
:root {
    --pri-bg-light   : #F6F4F1;
    --pri-bg-white   : #FFFFFF;
    --pri-bg-dark    : #1E2820;
    --pri-accent     : #7FB13D;
    --pri-gold       : #C7A87A;
    --pri-gold-dark  : #b2945f;
    --pri-text       : #1A1A1A;
    --pri-muted      : #666666;
    --pri-border     : #DDD8D2;
    --pri-radius     : 4px;
    --pri-radius-lg  : 10px;
    --pri-transition : 0.26s ease;
    --pri-shadow-sm  : 0 2px 12px rgba(0,0,0,0.06);
    --pri-shadow-md  : 0 8px 32px rgba(0,0,0,0.10);
}


/* ═══════════════════════════════════════════
   SHARED LAYOUT
═══════════════════════════════════════════ */
.pri-container {
    max-width : 1180px;
    margin    : 0 auto;
    padding   : 0 24px;
}

.pri-label {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--pri-accent);
    margin-bottom  : 14px;
}

.pri-section-header {
    text-align    : center;
    margin-bottom : 56px;
}

.pri-section-title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(30px, 3.2vw, 40px);
    font-weight   : 600;
    color         : var(--pri-text);
    line-height   : 1.2;
    margin        : 0 0 14px;
    letter-spacing: -0.01em;
}

.pri-section-sub {
    font-family : 'Inter', sans-serif;
    font-size   : 15px;
    font-weight : 300;
    color       : var(--pri-muted);
    line-height : 1.75;
    margin      : 0;
    max-width   : 600px;
    margin-left : auto;
    margin-right: auto;
}


/* ═══════════════════════════════════════════
   BUTTON SYSTEM
═══════════════════════════════════════════ */
.pri-btn {
    display         : inline-block;
    padding         : 14px 36px;
    font-family     : 'Inter', sans-serif;
    font-size       : 14px;
    font-weight     : 500;
    letter-spacing  : 0.06em;
    text-transform  : uppercase;
    text-decoration : none;
    border-radius   : var(--pri-radius);
    border          : 2px solid transparent;
    cursor          : pointer;
    white-space     : nowrap;
    line-height     : 1;
    transition      : background-color var(--pri-transition), color var(--pri-transition),
                      border-color var(--pri-transition), box-shadow var(--pri-transition);
}
.pri-btn--primary {
    background-color : var(--pri-gold);
    color            : #FFFFFF !important;
    border-color     : var(--pri-gold);
}
.pri-btn--primary:hover,
.pri-btn--primary:focus-visible {
    background-color : var(--pri-gold-dark);
    border-color     : var(--pri-gold-dark);
    box-shadow       : 0 4px 18px rgba(199,168,122,0.4);
}
.pri-btn--outline {
    background-color : transparent;
    color            : var(--pri-text) !important;
    border-color     : var(--pri-border);
}
.pri-btn--outline:hover,
.pri-btn--outline:focus-visible {
    border-color     : var(--pri-text);
    box-shadow       : var(--pri-shadow-sm);
}
.pri-btn--whatsapp {
    background-color : #1DAA57;
    color            : #FFFFFF !important;
    border-color     : #1DAA57;
    display          : inline-flex;
    align-items      : center;
    gap              : 8px;
}
.pri-btn--whatsapp:hover,
.pri-btn--whatsapp:focus-visible {
    background-color : #178f49;
    border-color     : #178f49;
    box-shadow       : 0 4px 18px rgba(29,170,87,0.35);
}
.pri-btn:focus-visible {
    outline        : 3px solid var(--pri-accent);
    outline-offset : 3px;
}


/* ═══════════════════════════════════════════
   1. HERO
═══════════════════════════════════════════ */
.pri-hero {
    background-color : #FFFFFF;
    padding          : 80px 24px 88px;
    text-align       : center;
    border-bottom    : 1px solid var(--pri-border);
}

.pri-hero__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(36px, 4.5vw, 56px);
    font-weight   : 600;
    color         : var(--pri-text);
    line-height   : 1.15;
    margin        : 0 0 20px;
    letter-spacing: -0.02em;
}

.pri-hero__subtitle {
    font-family : 'Inter', sans-serif;
    font-size   : 17px;
    font-weight : 300;
    color       : var(--pri-muted);
    line-height : 1.8;
    margin      : 0 auto;
    max-width   : 640px;
}


/* ═══════════════════════════════════════════
   2. PRICING CARDS
═══════════════════════════════════════════ */
.pri-pricing {
    background-color : var(--pri-bg-light);
    padding          : 88px 24px;
}

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

/* Card */
.pri-card {
    background-color : var(--pri-bg-white);
    border           : 1px solid var(--pri-border);
    border-radius    : var(--pri-radius-lg);
    padding          : 40px 32px 36px;
    position         : relative;
    display          : flex;
    flex-direction   : column;
    gap              : 14px;
    transition       : transform var(--pri-transition), box-shadow var(--pri-transition);
}
.pri-card:hover {
    transform  : translateY(-5px);
    box-shadow : var(--pri-shadow-md);
}

/* Highlighted card */
.pri-card--highlight {
    border-color : var(--pri-gold);
    background   : linear-gradient(150deg, #fffdf8 0%, #fff8ec 100%);
}

/* "Most Popular" badge */
.pri-card__badge {
    position      : absolute;
    top           : -13px;
    left          : 50%;
    transform     : translateX(-50%);
    background    : var(--pri-gold);
    color         : #FFFFFF;
    font-family   : 'Inter', sans-serif;
    font-size     : 11px;
    font-weight   : 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding       : 5px 18px;
    border-radius : 20px;
    white-space   : nowrap;
}

.pri-card__name {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : 20px;
    font-weight   : 600;
    color         : var(--pri-text);
    margin        : 0;
    line-height   : 1.25;
    padding-top   : 8px;
    letter-spacing: -0.01em;
}

.pri-card__price {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(24px, 3vw, 32px);
    font-weight   : 600;
    color         : var(--pri-gold);
    line-height   : 1.1;
}

.pri-card__desc {
    font-family : 'Inter', sans-serif;
    font-size   : 15px;
    font-weight : 300;
    color       : var(--pri-muted);
    line-height : 1.65;
    margin      : 0;
    flex        : 1;
}

.pri-card .pri-btn {
    align-self : flex-start;
    font-size  : 13px;
    padding    : 11px 28px;
    margin-top : auto;
}

@media (max-width: 640px) {
    .pri-cards              { grid-template-columns: 1fr; }
    .pri-card .pri-btn      { /*width: 100%;*/ text-align: center; }
    .pri-pricing            { padding: 64px 20px; }
}


/* ═══════════════════════════════════════════
   3. PROGRAMME HIGHLIGHT
═══════════════════════════════════════════ */
.pri-programme {
    background-color : var(--pri-bg-white);
    padding          : 88px 24px;
    border-top       : 1px solid var(--pri-border);
}

.pri-programme__inner {
    display               : grid;
    grid-template-columns : 1fr 380px;
    gap                   : 80px;
    align-items           : start;
}

/* Left — text */
.pri-programme__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(30px, 3.5vw, 40px);
    font-weight   : 600;
    color         : var(--pri-text);
    line-height   : 1.2;
    margin        : 0 0 20px;
    letter-spacing: -0.01em;
}

.pri-programme__desc {
    font-family : 'Inter', sans-serif;
    font-size   : 16px;
    font-weight : 300;
    color       : var(--pri-muted);
    line-height : 1.85;
    margin      : 0 0 32px;
}

/* Benefits list */
.pri-benefits {
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : flex;
    flex-direction : column;
}

.pri-benefits__item {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    padding      : 13px 0;
    border-bottom: 1px solid var(--pri-border);
    font-family  : 'Inter', sans-serif;
    font-size    : 15px;
    color        : #4a4a4a;
    line-height  : 1.5;
}
.pri-benefits__item:last-child { border-bottom: none; }

/* Right — quote card */
.pri-programme__quote {
    background-color : var(--pri-bg-light);
    border           : 1px solid var(--pri-border);
    border-radius    : var(--pri-radius-lg);
    padding          : 40px 36px;
    text-align       : center;
    position         : sticky;
    top              : 32px;
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    gap              : 12px;
}

.pri-programme__price {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(32px, 4vw, 44px);
    font-weight   : 700;
    color         : var(--pri-gold);
    line-height   : 1;
    margin        : 4px 0;
}

.pri-programme__price-note {
    font-family : 'Inter', sans-serif;
    font-size   : 13px;
    color       : var(--pri-muted);
    line-height : 1.5;
    margin      : 0 0 8px;
}

.pri-programme__actions {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    width          : 100%;
    margin-top     : 8px;
}

.pri-programme__actions .pri-btn {
    /*width           : 100%;*/
    text-align      : center;
    justify-content : center;
}

@media (max-width: 960px) {
    .pri-programme__inner {
        grid-template-columns : 1fr;
        gap                   : 48px;
    }
    .pri-programme__quote { position: static; }
    .pri-programme        { padding: 64px 20px; }
}


/* ═══════════════════════════════════════════
   4. BOTTOM CTA
═══════════════════════════════════════════ */
.pri-cta {
    background-color : var(--pri-bg-dark);
    padding          : 96px 24px;
    text-align       : center;
}

.pri-cta__heading {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(32px, 4vw, 46px);
    font-weight   : 600;
    color         : #FFFFFF !important;
    line-height   : 1.2;
    margin        : 0 0 20px;
    letter-spacing: -0.01em;
}

.pri-cta__desc {
    font-family : 'Inter', sans-serif;
    font-size   : 16px;
    font-weight : 300;
    color       : rgba(255,255,255,0.72);
    line-height : 1.85;
    margin      : 0 auto 40px;
    max-width   : 640px;
}

.pri-cta__actions {
    display         : flex;
    gap             : 16px;
    justify-content : center;
    flex-wrap       : wrap;
}

@media (max-width: 480px) {
    .pri-cta           { padding: 72px 20px; }
    .pri-cta__actions  { flex-direction: column; align-items: stretch; }
    .pri-cta__actions .pri-btn { width: 75%; text-align: center; justify-content: center; }
}