/* ==========================================================================
   Birdwatching Peru: page tokens and browser behavior
   ========================================================================== */

/* The page extends the established Andean editorial palette and 7px corners. */
.birdwatching-page {
    --bird-ink: #171717;
    --bird-copy: #5d5d5d;
    --bird-muted: #818181;
    --bird-red: #b90201;
    --bird-red-bright: #f10100;
    --bird-line: #e8e8e4;
    --bird-soft: #f7f7f5;
    --bird-warm: #fffaf5;
    --bird-dark: #171717;
    --bird-radius: 7px;
    overflow: clip;
    background: #ffffff;
    color: var(--bird-copy);
}

/* Anchor targets stop below the sticky chapter navigation. */
.birdwatching-page section[id] {
    scroll-margin-top: 72px;
}

/* Browser selection and scrollbars use the page palette. */
.birdwatching-page ::selection {
    background: var(--bird-red);
    color: #ffffff;
}

/* The page scrollbar retains a quiet warm track and red thumb. */
html:has(.birdwatching-page) {
    scrollbar-color: #b90201 #f7f7f5;
    scrollbar-width: thin;
}

/* Keyboard focus remains visible on every interactive element. */
.birdwatching-page a:focus-visible,
.birdwatching-page button:focus-visible {
    border-radius: var(--bird-radius);
    outline: 3px solid rgba(185, 2, 1, 0.34);
    outline-offset: 3px;
}

/* All page figures use the surrounding layout instead of browser margins. */
.birdwatching-page figure {
    margin: 0;
}

/* ==========================================================================
   Shared hero, breadcrumb and chapter navigation
   ========================================================================== */

/* The shared hero creates a photographic first viewport for the source title. */
.birdwatching-page .tour-category-hero {
    min-height: 620px;
    height: clamp(620px, calc(100svh - 69px), 790px);
}

/* Desktop hero photography prioritizes the cock of the rock. */
.birdwatching-page .tour-category-hero-image {
    object-position: center 42%;
}

/* The exact source title stays compact enough to preserve the photograph. */
.birdwatching-page .tour-category-hero-title {
    max-width: 14ch;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.98;
    text-wrap: balance;
}

/* The breadcrumb creates a calm handoff from photography to reading. */
.birdwatching-breadcrumb {
    border-bottom: 1px solid var(--bird-line);
    background: #ffffff;
}

/* Breadcrumb copy is compact and keeps the source title visible. */
.birdwatching-breadcrumb p {
    padding: 0.85rem 0;
    margin: 0;
    color: var(--bird-copy);
    font-size: 0.82rem;
}

/* The breadcrumb link uses the accessible deep red. */
.birdwatching-breadcrumb a {
    color: var(--bird-red);
    font-weight: 800;
    text-decoration: none;
}

/* The chapter navigation uses the same divider as the reading surface. */
.birdwatching-nav {
    border-bottom-color: var(--bird-line);
}

/* ==========================================================================
   Overview and supplemental planning note
   ========================================================================== */

/* The introduction gives the heading and complete source copy distinct columns. */
.birdwatching-intro-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
}

/* The overview heading remains available during the long source introduction. */
.birdwatching-intro-heading {
    position: sticky;
    top: 108px;
}

/* Source copy stays inside a comfortable editorial reading measure. */
.birdwatching-reading-copy {
    max-width: 760px;
}

/* Source paragraphs share a calm, legible reading rhythm. */
.birdwatching-reading-copy > p,
.birdwatching-experience-copy > p,
.birdwatching-principle p {
    margin: 0 0 1.2rem;
    color: var(--bird-copy);
    font-size: 1rem;
    line-height: 1.82;
}

/* The supplemental planning guidance is clearly separate without a side rail. */
.birdwatching-planning-note {
    padding: clamp(1.4rem, 3vw, 2rem);
    margin-top: 2.2rem;
    border: 1px solid var(--bird-line);
    border-radius: var(--bird-radius);
    background: var(--bird-warm);
}

/* The guidance title follows the established editorial display face. */
.birdwatching-planning-note h3 {
    margin: 0 0 0.65rem;
    color: var(--bird-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* The guidance copy closes without surplus spacing. */
.birdwatching-planning-note p {
    margin: 0;
    color: var(--bird-copy);
    line-height: 1.72;
}

/* ==========================================================================
   Birding experience chapter
   ========================================================================== */

/* The experience chapter places source photography and copy at equal width. */
.birdwatching-experience {
    background: var(--bird-soft);
}

/* The image and source paragraphs form one continuous editorial spread. */
.birdwatching-experience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

/* The original wide photograph becomes an immersive vertical crop. */
.birdwatching-experience-media {
    height: 620px;
    min-height: 620px;
    overflow: hidden;
    border-radius: var(--bird-radius);
    background: #ffffff;
}

/* The experience photograph fills its allotted half without distortion. */
.birdwatching-experience-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The experience copy remains bounded for comfortable reading. */
.birdwatching-experience-copy {
    max-width: 700px;
}

/* ==========================================================================
   Operating principles
   ========================================================================== */

/* The principles section uses a clean white field before the contact break. */
.birdwatching-approach-heading {
    max-width: 850px;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Source principles share the width but remain text-led, not nested cards. */
.birdwatching-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 7vw, 7rem);
}

/* Each principle uses a top rule to define rhythm without a boxed text rail. */
.birdwatching-principle {
    position: relative;
    padding-top: 1.75rem;
    border-top: 1px solid var(--bird-line);
}

/* Principle titles carry the hierarchy without decorative labels. */
.birdwatching-principle h3 {
    max-width: 20ch;
    margin: 0 0 1rem;
    color: var(--bird-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.25rem, 2.7vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
}

/* The environmental badge anchors the second principle without overpowering it. */
.birdwatching-principle-green > img {
    float: right;
    width: 87px;
    height: 86px;
    margin: 0 0 1rem 1rem;
    object-fit: contain;
}

/* ==========================================================================
   Dark contact invitation
   ========================================================================== */

/* The primary conversion chapter creates a strong pause after the principles. */
.birdwatching-contact {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    background: var(--bird-dark);
    color: #ffffff;
}

/* Contact context and direct actions receive equal space. */
.birdwatching-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

/* The contact statement uses display scale without exceeding the type ceiling. */
.birdwatching-contact h2 {
    max-width: 14ch;
    margin: 0 0 1rem;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    text-wrap: balance;
}

/* Supporting contact copy stays visibly subordinate to the invitation. */
.birdwatching-contact p {
    max-width: 58ch;
    margin: 0 0 1rem;
    color: #f7f7f5;
    line-height: 1.7;
}

/* The direct-action heading matches the source hierarchy. */
.birdwatching-contact-actions h3 {
    margin: 0 0 1.1rem;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.25rem, 2.7vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
}

/* Phone and email are stacked as generous, keyboard-friendly targets. */
.birdwatching-contact-links {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1.2rem;
}

/* Direct contact links stay visually distinct on the dark surface. */
.birdwatching-contact-links a {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.7rem;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    text-decoration: none;
}

/* The booking action uses the established decisive red. */
.birdwatching-book-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.8rem 1.25rem;
    border-radius: var(--bird-radius);
    background: var(--bird-red-bright);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-decoration: none;
    transition: background-color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The booking action acknowledges pointer and keyboard interaction. */
.birdwatching-book-button:hover,
.birdwatching-book-button:focus-visible {
    background: var(--bird-red);
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   Tour collection
   ========================================================================== */

/* The tour heading stays centered over the comparable collection. */
.birdwatching-tours-heading {
    max-width: 960px;
    margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
    text-align: center;
}

/* The reusable heading aligns its content with the tour grid. */
.birdwatching-tours-heading .welcome-section-heading,
.birdwatching-tours-heading .welcome-section-heading h2,
.birdwatching-tours-heading .welcome-section-heading p {
    margin-right: auto;
    margin-left: auto;
}

/* Six source tours form a consistent three-column comparison grid. */
.birdwatching-tour-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

/* Tour card corners and primary actions conform to the site-wide 7px rule. */
.birdwatching-tour-grid .tour-best-card,
.birdwatching-tour-grid .tour-best-card-media,
.birdwatching-tour-grid .tour-best-card-image,
.birdwatching-tour-grid .tour-best-card-badge,
.birdwatching-tour-grid .tour-best-card-button {
    border-radius: var(--bird-radius) !important;
}

/* Tour numerals align cleanly while comparing durations and prices. */
.birdwatching-tour-grid .tour-best-card-price-duration,
.birdwatching-tour-grid .tour-best-card-price-total {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Field-guide galleries and quote invitation
   ========================================================================== */

/* The first gallery sits on a warm-neutral reading field. */
.birdwatching-gallery-section {
    background: var(--bird-warm);
}

/* Gallery headings remain compact so photography carries the section. */
.birdwatching-gallery-heading {
    max-width: 780px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Source photography uses an editorial two-column field-guide arrangement. */
.birdwatching-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.2rem, 2.5vw, 2.25rem);
}

/* Each gallery figure reserves a stable image area during loading. */
.birdwatching-gallery figure {
    display: grid;
    align-content: start;
    gap: 0.7rem;
}

/* Source images share a stable ratio and the required 7px radius. */
.birdwatching-gallery img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--bird-radius);
    background: var(--bird-soft);
}

/* Captions use a quiet field-note treatment. */
.birdwatching-gallery figcaption {
    color: var(--bird-copy);
    font-size: 0.82rem;
    font-weight: 800;
}

/* The request block keeps the original invitation prominent between galleries. */
.birdwatching-quote {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--bird-red);
    color: #ffffff;
}

/* Quote title and exact source copy form a compact two-column action band. */
.birdwatching-quote-inner {
    display: grid;
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

/* The quote title uses the established display hierarchy. */
.birdwatching-quote h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* Quote copy remains legible and action-led on red. */
.birdwatching-quote p {
    max-width: 68ch;
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.72;
}

/* Inline quote actions remain visible without becoming extra buttons. */
.birdwatching-quote a {
    color: #ffffff;
    font-weight: 900;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* The closing gallery returns to white to separate it from the first sequence. */
.birdwatching-gallery-closing {
    background: #ffffff;
}

/* ==========================================================================
   Responsive composition
   ========================================================================== */

/* Two-column card comparison remains useful on medium screens. */
@media (max-width: 1199.98px) {
    .birdwatching-tour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Editorial columns collapse before their copy becomes compressed. */
@media (max-width: 991.98px) {
    .birdwatching-intro-grid,
    .birdwatching-experience-grid,
    .birdwatching-approach-grid,
    .birdwatching-contact-grid,
    .birdwatching-quote-inner {
        grid-template-columns: 1fr;
    }

    .birdwatching-intro-heading {
        position: static;
    }

    .birdwatching-experience-media {
        height: 480px;
        min-height: 480px;
    }

    .birdwatching-contact h2,
    .birdwatching-contact-copy,
    .birdwatching-contact-actions {
        max-width: 760px;
    }
}

/* Mobile keeps actions readable and converts all collections to one column. */
@media (max-width: 767.98px) {
    .birdwatching-page .tour-category-hero {
        min-height: 570px;
        height: 78svh;
    }

    .birdwatching-page .tour-category-hero-image {
        object-position: center;
    }

    .birdwatching-page .tour-category-hero-title {
        max-width: 12ch;
        font-size: clamp(2rem, 10vw, 3.6rem);
    }

    .birdwatching-tour-grid,
    .birdwatching-gallery {
        grid-template-columns: 1fr;
    }

    /* Mobile tour footers stack price and action so neither is compressed. */
    .birdwatching-tour-grid .tour-best-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    /* The price group keeps its numerals together above the full-width action. */
    .birdwatching-tour-grid .tour-best-card-price-group {
        width: 100%;
    }

    .birdwatching-experience-media {
        height: 360px;
        min-height: 360px;
    }

    .birdwatching-principle-green > img {
        float: none;
        margin: 0 0 1.25rem;
    }

    .birdwatching-contact-links a {
        font-size: 1rem;
    }

    .birdwatching-gallery img {
        aspect-ratio: 4 / 3;
    }
}

/* Reduced-motion visitors keep a stable interface without transition movement. */
@media (prefers-reduced-motion: reduce) {
    .birdwatching-book-button,
    .birdwatching-tour-grid .tour-best-card,
    .birdwatching-tour-grid .tour-best-card-image {
        transition: none;
    }
}