/*
 * About Page – Stylesheet
 * Loaded only on pages using template-about.php
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
.ab-page {
    --ab-bg-light  : #F6F4F1;
    --ab-bg-white  : #FFFFFF;
    --ab-bg-dark   : #1E2820;
    --ab-accent    : #7FB13D;
    --ab-gold      : #C7A87A;
    --ab-gold-dark : #b2945f;
    --ab-text      : #1A1A1A;
    --ab-muted     : #666666;
    --ab-border    : #DDD8D2;
    --ab-radius    : 4px;
    --ab-radius-lg : 10px;
    font-family    : 'Inter', sans-serif;
}


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

.ab-label {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : #7FB13D;
    margin-bottom  : 14px;
}

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

.ab-h2 {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(30px, 3.2vw, 40px);
    font-weight    : 600;
    color          : #1A1A1A;
    line-height    : 1.2;
    margin         : 0 0 16px;
    letter-spacing : -0.01em;
}

.ab-sub {
    font-size   : 15px;
    font-weight : 300;
    color       : #666;
    line-height : 1.75;
    max-width   : 580px;
    margin      : 0 auto;
}

.ab-img-placeholder {
    text-align  : center;
    color       : #aaa;
    font-size   : 14px;
    line-height : 1.5;
}
.ab-img-placeholder svg { display: block; margin: 0 auto 8px; }


/* ═══════════════════════════════════════════
   BUTTON SYSTEM
═══════════════════════════════════════════ */
.ab-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(--ab-radius, 4px);
    border          : 2px solid transparent;
    cursor          : pointer;
    white-space     : nowrap;
    line-height     : 1;
    transition      : background-color 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}
.ab-btn--primary {
    background-color : #C7A87A;
    color            : #FFFFFF !important;
    border-color     : #C7A87A;
}
.ab-btn--primary:hover,
.ab-btn--primary:focus-visible {
    background-color : #b2945f;
    border-color     : #b2945f;
    box-shadow       : 0 4px 18px rgba(199,168,122,0.4);
}
.ab-btn--whatsapp {
    background-color : #1DAA57;
    color            : #FFFFFF !important;
    border-color     : #1DAA57;
    display          : inline-flex;
    align-items      : center;
    gap              : 8px;
}
.ab-btn--whatsapp:hover,
.ab-btn--whatsapp:focus-visible {
    background-color : #178f49;
    border-color     : #178f49;
    box-shadow       : 0 4px 18px rgba(29,170,87,0.35);
}
.ab-btn:focus-visible {
    outline        : 3px solid #7FB13D;
    outline-offset : 3px;
}


/* ═══════════════════════════════════════════
   1. HERO
═══════════════════════════════════════════ */
.ab-hero {
    background    : #FFFFFF;
    padding       : 80px 0 88px;
    border-bottom : 1px solid #DDD8D2;
}
.ab-hero__inner {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 80px;
    align-items           : center;
}
.ab-hero__title {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(36px, 4vw, 48px);
    font-weight    : 600;
    color          : #1A1A1A;
    line-height    : 1.15;
    margin         : 0 0 24px;
    letter-spacing : -0.02em;
}
.ab-hero__desc {
    font-size   : 17px;
    font-weight : 300;
    color       : #666;
    line-height : 1.85;
    margin      : 0 0 32px;
}
.ab-hero__img {
    background      : #F6F4F1;
    border-radius   : 10px;
    aspect-ratio    : 4 / 3;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 1px solid #DDD8D2;
    overflow        : hidden;
}


/* ═══════════════════════════════════════════
   2. STATS BAR
═══════════════════════════════════════════ */
.ab-stats {
    background : #1E2820;
    padding    : 40px 0;
}
.ab-stats__inner {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    text-align            : center;
}
.ab-stat {
    padding      : 12px 16px;
    border-right : 1px solid rgba(255,255,255,0.1);
}
.ab-stat:last-child { border-right: none; }
.ab-stat__value {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 32px;
    font-weight : 700;
    color       : #C7A87A;
    line-height : 1;
}
.ab-stat__label {
    font-size      : 13px;
    color          : rgba(255,255,255,0.65);
    margin-top     : 8px;
    letter-spacing : 0.04em;
}


/* ═══════════════════════════════════════════
   3. OUR APPROACH / PHILOSOPHY
═══════════════════════════════════════════ */
.ab-approach {
    background    : #F6F4F1;
    padding       : 88px 0;
    border-bottom : 1px solid #DDD8D2;
}
.ab-pillars {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 28px;
}
.ab-pillar {
    background    : #FFFFFF;
    border        : 1px solid #DDD8D2;
    border-radius : 10px;
    padding       : 40px 32px;
    transition    : transform 0.26s ease, box-shadow 0.26s ease;
}
.ab-pillar:hover {
    transform  : translateY(-4px);
    box-shadow : 0 8px 32px rgba(0,0,0,0.10);
}
.ab-pillar__icon {
    width           : 48px;
    height          : 48px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin-bottom   : 24px;
}
.ab-pillar__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 20px;
    font-weight : 600;
    color       : #1A1A1A;
    margin      : 0 0 14px;
    line-height : 1.3;
}
.ab-pillar__desc {
    font-size   : 15px;
    font-weight : 300;
    color       : #666;
    line-height : 1.7;
    margin      : 0;
}


/* ═══════════════════════════════════════════
   4. STORY / TEAM
═══════════════════════════════════════════ */
.ab-story {
    background    : #FFFFFF;
    padding       : 88px 0;
    border-bottom : 1px solid #DDD8D2;
}
.ab-story__inner {
    display               : grid;
    grid-template-columns : 380px 1fr;
    gap                   : 80px;
    align-items           : start;
}
.ab-story__img {
    background      : #F6F4F1;
    border-radius   : 10px;
    aspect-ratio    : 3 / 4;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 1px solid #DDD8D2;
    position        : sticky;
    top             : 32px;
    overflow        : hidden;
}
.ab-story__title {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(30px, 3.5vw, 40px);
    font-weight    : 600;
    color          : #1A1A1A;
    line-height    : 1.2;
    margin         : 0 0 20px;
    letter-spacing : -0.01em;
}
.ab-story__desc {
    font-size   : 16px;
    font-weight : 300;
    color       : #666;
    line-height : 1.85;
    margin      : 0 0 24px;
}
.ab-checklist {
    list-style : none;
    margin     : 0;
    padding    : 0;
}
.ab-checklist__item {
    display       : flex;
    align-items   : center;
    gap           : 12px;
    padding       : 13px 0;
    border-bottom : 1px solid #DDD8D2;
    font-family   : 'Inter', sans-serif;
    font-size     : 15px;
    color         : #4a4a4a;
    line-height   : 1.5;
}
.ab-checklist__item:last-child { border-bottom: none; }


/* ═══════════════════════════════════════════
   5. WHY CHOOSE US
═══════════════════════════════════════════ */
.ab-why {
    background    : #F6F4F1;
    padding       : 88px 0;
    border-bottom : 1px solid #DDD8D2;
}
.ab-features {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 24px;
}
.ab-feature {
    display       : flex;
    gap           : 20px;
    background    : #FFFFFF;
    border        : 1px solid #DDD8D2;
    border-radius : 10px;
    padding       : 32px;
    transition    : box-shadow 0.26s ease;
}
.ab-feature:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.ab-feature__icon {
    flex-shrink     : 0;
    width           : 44px;
    height          : 44px;
    border-radius   : 8px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}
.ab-feature__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 18px;
    font-weight : 600;
    color       : #1A1A1A;
    margin      : 0 0 10px;
    line-height : 1.3;
}
.ab-feature__desc {
    font-size   : 15px;
    font-weight : 300;
    color       : #666;
    line-height : 1.7;
    margin      : 0;
}


/* ═══════════════════════════════════════════
   6. CTA
═══════════════════════════════════════════ */
.ab-cta {
    background : #1E2820;
    padding    : 96px 0;
    text-align : center;
}
.ab-cta .ab-label { color: #7FB13D; }
.ab-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;
}
.ab-cta__desc {
    font-size   : 16px;
    font-weight : 300;
    color       : rgba(255,255,255,0.72);
    line-height : 1.85;
    max-width   : 600px;
    margin      : 0 auto 40px;
}
.ab-cta__actions {
    display         : flex;
    gap             : 16px;
    justify-content : center;
    flex-wrap       : wrap;
}


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 960px) {
    .ab-hero__inner           { grid-template-columns: 1fr; gap: 48px; }
    .ab-story__inner          { grid-template-columns: 1fr; gap: 48px; }
    .ab-story__img            { position: static; aspect-ratio: 4 / 3; }
    .ab-hero, .ab-approach, .ab-story, .ab-why { padding: 64px 0; }
}
@media (max-width: 768px) {
    .ab-pillars               { grid-template-columns: 1fr; }
    .ab-features              { grid-template-columns: 1fr; }
    .ab-stats__inner          { grid-template-columns: repeat(2, 1fr); }
    .ab-stat:nth-child(2)     { border-right: none; }
    .ab-stat:nth-child(3)     { border-right: 1px solid rgba(255,255,255,0.1); }
    .ab-stat:nth-child(4)     { border-right: none; }
}
@media (max-width: 480px) {
    .ab-hero                  { padding: 60px 0 72px; }
    .ab-cta                   { padding: 72px 0; }
    .ab-cta__actions          { flex-direction: column; align-items: stretch; }
    .ab-cta__actions .ab-btn  { width: 79%; text-align: center; justify-content: center; }
}