/* ════════════════════════════════════════════════════════
   ABOUT PAGE — EXTRA CSS
   File: css/about.css
   Loaded AFTER css/style.css on about.php only.
   All base styles (buttons, cards, fonts, layout, footer,
   header, divider, ornament) come from css/style.css.
   Only About-specific overrides & new components are here.
════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   ABOUT PAGE HERO
   Different design from homepage: full-width cinematic
   banner with centered script title + italic subtitle
════════════════════════════════════════════════════════ */
.about-hero {
    position: relative;
    width: 100%;
    min-height: 42vh;                          /* ← ABOUT HERO HEIGHT — adjust as needed */
    display: flex;
    align-items: flex-end;                     /* text anchors at bottom of image */
    justify-content: center;
    overflow: hidden;
    padding-bottom: 5rem;                      /* ← SPACE BELOW TEXT inside hero */
    padding-top: 140px;                        /* ← TOP PADDING (clears fixed header) */
    background:
        linear-gradient(to bottom,
            rgba(26,32,44,0.35) 0%,
            rgba(26,32,44,0.6)  45%,
            rgba(26,32,44,0.97) 100%),
        url('/images/about-hero.jpg') no-repeat center 30% / cover; /* ← ABOUT HERO IMAGE */
}

.about-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    max-width: 900px;
}

/* Small eyebrow above the hero title */
.about-hero__eyebrow {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.7rem;                         /* ← HERO EYEBROW SIZE */
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 1.2rem;
}

/* Hero title — larger Pinyon Script */
.about-hero__title {
    font-family: 'Pinyon Script', cursive;     /* ← ABOUT HERO TITLE FONT */
    font-size: clamp(3.6rem, 8vw, 7rem);       /* ← ABOUT HERO TITLE SIZE */
    font-weight: 400;
    color: var(--gold-light);
    line-height: 1.05;
    margin-bottom: 1rem;
    text-shadow:
        0 0 3px rgba(0,0,0,0.9),
        0 0 12px rgba(0,0,0,0.7),
        0 4px 24px rgba(0,0,0,0.5);
}

/* Hero subtitle — italic Cormorant */
.about-hero__subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);  /* ← ABOUT HERO SUBTITLE SIZE */
    font-weight: 300;
    color: rgba(240,237,232,0.72);
    letter-spacing: 0.1em;
    max-width: 560px;
    margin: 0 auto;
}

/* Decorative gold line under hero title */
.about-hero__line {
    width: 60px;                               /* ← DECORATIVE LINE WIDTH */
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-light), transparent);
    margin: 1.1rem auto;
    box-shadow: 0 0 6px rgba(228,201,123,0.3);
}

/* ════════════════════════════════════════════════════════
   PROFILE / DETAILS SECTION
════════════════════════════════════════════════════════ */
.profile-section { padding: 8rem 0 6rem; }    /* ← PROFILE SECTION PADDING */

/* Detail grid — icon label pairs */
.profile-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);     /* ← DETAIL GRID: 2 columns */
    gap: 0;
    margin-top: 2rem;
}

.detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0;                         /* ← ROW VERTICAL PADDING */
    border-bottom: 1px solid rgba(255,255,255,0.04); /* ← ROW SEPARATOR */
}
.detail-row:nth-child(even) { padding-left: 1.8rem; } /* indent right column */

.detail-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.72rem;                        /* ← LABEL SIZE */
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-dim);
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 110px;                          /* ← LABEL MIN WIDTH — keeps values aligned */
}

.detail-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;                           /* ← VALUE SIZE */
    font-style: italic;
    color: var(--text);
    font-weight: 300;
}

/* Specialties — displayed as inline gold tags */
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.4rem;
}
.detail-tag {
    font-family: 'Jost', sans-serif;
    font-size: 0.65rem;                        /* ← TAG SIZE */
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-dim);
    border: 1px solid rgba(201,168,76,0.28);
    background: rgba(201,168,76,0.05);
    padding: 3px 10px;
    border-radius: 1px;
    font-weight: 300;
}

/* ════════════════════════════════════════════════════════
   GALLERY SECTION
   NOTE: All gallery grid, popup, carousel and dot styles
   are self-contained inside sections/about/gallery.php
   as a <style> block, so they load only when needed
   and are easy to edit in one place.
   Only the section padding is set here.
════════════════════════════════════════════════════════ */
.gallery-section { padding: 7rem 0; }          /* ← GALLERY SECTION PADDING */

/* ════════════════════════════════════════════════════════
   STORY SECTION
════════════════════════════════════════════════════════ */
.story-section { padding: 8rem 0; }

.story-inner {
    max-width: 820px;                          /* ← STORY MAX WIDTH */
    margin: 0 auto;
    position: relative;
}

/* Vertical gold line running left of the story text */
.story-inner::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -3rem;                               /* ← STORY LINE OFFSET from text */
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(201,168,76,0.4) 15%,
        rgba(201,168,76,0.5) 50%,
        rgba(201,168,76,0.4) 85%,
        transparent);
}

/* Chapter headings inside the story */
.story-chapter {
    font-family: 'Pinyon Script', cursive;     /* ← STORY CHAPTER HEADING FONT */
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);  /* ← STORY CHAPTER SIZE */
    font-weight: 400;
    color: var(--gold-light);
    margin: 3rem 0 1rem;                       /* ← CHAPTER MARGIN: top bottom */
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
    line-height: 1.2;
}
.story-chapter:first-child { margin-top: 0; }

/* Pull-quote — highlighted single line */
.story-pullquote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem); /* ← PULL QUOTE SIZE */
    color: rgba(240,237,232,0.82);
    border-left: 2px solid var(--gold-dim);
    padding: 0.5rem 0 0.5rem 1.5rem;           /* ← PULL QUOTE PADDING */
    margin: 2rem 0;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════
   BOOKING CTA SECTION
════════════════════════════════════════════════════════ */
.booking-cta {
    padding: 7rem 0;                           /* ← BOOKING SECTION PADDING */
    text-align: center;
    position: relative;
}

/* Ambient gold glow behind the CTA box */
.booking-cta::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 300px;              /* ← GLOW SIZE */
    background: radial-gradient(ellipse, rgba(201,168,76,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.booking-cta__box {
    display: inline-block;
    max-width: 680px;                         /* ← CTA BOX MAX WIDTH */
    width: 90%;
    padding: 4rem 3.5rem;                     /* ← CTA BOX PADDING */
    background: var(--bg2);
    border: 1px solid rgba(201,168,76,0.35);
    position: relative;
    z-index: 1;
}

/* Outer decorative frame around CTA box */
.booking-cta__box::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(201,168,76,0.12);
    pointer-events: none;
}

/* Gold top line */
.booking-cta__box::after {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-light), transparent);
    box-shadow: 0 0 8px rgba(228,201,123,0.25);
}

.booking-cta__eyebrow { margin-bottom: 1rem; }

.booking-cta__title {
    font-family: 'Pinyon Script', cursive;
    font-size: clamp(2.2rem, 5vw, 3.8rem);    /* ← CTA TITLE SIZE */
    font-weight: 400;
    color: var(--gold-light);
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.booking-cta__text {
    max-width: 460px;                         /* ← CTA TEXT MAX WIDTH */
    margin: 0 auto 0;
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1080px
════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item:nth-child(4n) { grid-column: span 1; }
    .profile-details { grid-template-columns: 1fr; }
    .detail-row:nth-child(even) { padding-left: 0; }
    .story-inner::before { display: none; }
    .booking-cta__box { padding: 3rem 2rem; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 768px
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .about-hero { min-height: 55vh; padding-bottom: 4rem; }
    .about-hero__title { font-size: clamp(3rem, 12vw, 5rem); }
    /* Switch gallery: hide desktop grid, show mobile carousel */
    .gallery-grid { display: none; }
    .gallery-mobile-wrap { display: block; }
    .profile-section { padding: 5rem 0 4rem; }
    .gallery-section { padding: 5rem 0; }
    .story-section   { padding: 5rem 0; }
    .booking-cta     { padding: 5rem 0; }
}