/**
 * sections.css
 * Default section layouts for the blueprint.
 *
 * These are PHP-rendered sections used in template parts.
 * Each section has a modifier for background variants.
 *
 * Usage:
 *   <section class="section">                  Default white bg
 *   <section class="section section--alt">     Grey bg
 *   <section class="section section--dark">    Dark bg, inverse text
 *   <section class="section section--brand">   Brand colour bg
 *   <section class="section section--tight">   Reduced padding
 *   <section class="section section--flush">   No padding (for full-bleed images)
 *
 * Layout patterns:
 *   .section__split        Half/half: image + content
 *   .section__grid         Feature grid (2, 3, or 4 cols)
 *   .section__centered     Centred content, max-width constrained
 *   .section__media        Full-bleed image/video with overlay
 */


/* ============================================================
   BASE SECTION
============================================================ */

.section {
    padding-block:    var(--section-padding);
    background-color: var(--section-bg);
}

.section--alt {
    background-color: var(--section-bg-alt);
}

.section--dark {
    background-color: var(--section-bg-dark);
    color:            var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
    color: var(--color-text-inverse);
}

.section--dark p,
.section--dark li {
    color: var(--color-text-light);
}

.section--brand {
    background-color: var(--section-bg-brand);
    color:            var(--color-text-inverse);
}

.section--brand h1,
.section--brand h2,
.section--brand h3,
.section--brand p {
    color: var(--color-text-inverse);
}

.section--tight {
    padding-block: var(--section-padding-sm);
}

.section--large {
    padding-block: var(--section-padding-lg);
}

.section--flush {
    padding-block: 0;
}

/* Inner container */
.section__inner {
    max-width:      var(--container-max);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
}

.section__inner--narrow {
    max-width: var(--content-narrow);
}

.section__inner--mid {
    max-width: var(--content-mid);
}

/* Section header - eyebrow + heading + lead */
.section__header {
    margin-bottom: var(--space-lg);
}

.section__header--centered {
    text-align:    center;
    max-width:     var(--content-mid);
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

.section__eyebrow {
    display:        block;
    font-size:      var(--text-label);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-brand);
    margin-bottom:  var(--space-xs);
}

.section--dark .section__eyebrow,
.section--brand .section__eyebrow {
    color: var(--color-brand-subtle);
}

/* pill-badge variant, add alongside the base class */
.section__eyebrow--pill {
    display:          inline-flex;
    align-items:      center;
    gap:              0.4em;
    width:            fit-content;
    border:           1px solid var(--color-brand-subtle);
    background-color: var(--color-brand-subtle);
    color:            var(--color-text);
    padding:          0.4em 1em;
    border-radius:    var(--radius-full);
    margin-bottom:    var(--space-sm);
}

.section__eyebrow--pill svg {
    width:       1em;
    height:      1em;
    flex-shrink: 0;
}

.section__heading {
    margin-bottom: var(--space-sm);
}

.section__lead {
    font-size:   var(--text-lead);
    color:       var(--color-text-muted);
    line-height: var(--leading-loose);
    max-width:   var(--measure-lead);
}

.section--dark .section__lead,
.section--brand .section__lead {
    color: var(--color-text-light);
}

.section__actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--space-sm);
    margin-top:  var(--space-lg);
}

.section__actions--centered {
    justify-content: center;
}


/* ============================================================
   SPLIT SECTION
   Half image, half content, or a different ratio via a modifier
   (--hero, --map). Flex-wrap instead of a viewport breakpoint: each
   column carries its own minimum comfortable width (--split-min-col,
   or the modifier's own token), and wraps to a stacked layout on its
   own whenever both minimums can't be satisfied side by side - no
   viewport number to tune, and a screen that's wide but short (or
   just oddly proportioned) gets judged on the room it actually has
   rather than a raw pixel guess.
   Image order toggles with .section__split--reversed
============================================================ */

.section__split {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--split-gap);
}

.section__split--reversed .section__split-media {
    order: 2;
}

.section__split--reversed .section__split-content {
    order: 1;
}

/* --reversed picks which side the image sits on once side by side,
   that has no meaning while stacked, cancel it whenever a split is
   currently wrapped. flex-wrap itself isn't queryable, so this still
   needs a width - 1150px rather than exactly matching the hero/map
   minimums' own ~1100px crossover (see --split-hero-*-min etc.),
   deliberately a bit past it so this stays correct even if a child
   theme's minimums shift slightly, rather than relying on the two
   staying pixel-perfect in sync. SPLIT-SIDE-BY-SIDE-BREAKPOINT: kept
   in sync with the aspect-ratio switch further down, both are really
   asking "is this split side by side yet" */
@media ( max-width: 1149px ) {
    .section__split--reversed .section__split-media,
    .section__split--reversed .section__split-content {
        order: unset;
    }
}

.section__split-media {
    flex:          1 1 0%;
    /* min(), not the bare token: a floor that matters for the side-
       by-side decision, but must never force this wider than its own
       row once wrapped alone on a narrow phone, or it overflows */
    min-width:     min( var(--split-min-col), 100% );
    position:      relative;
    border-radius: var(--radius-md);
    overflow:      hidden;
    aspect-ratio:  4 / 3;
}

.section__split-media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.section__split-content {
    flex:           1 1 0%;
    min-width:      min( var(--split-min-col), 100% );
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
}

/* modifier: the media column matches the content column's height
   instead of using a fixed aspect-ratio, e.g. Location's map or a
   tall photo next to a long block of text. Only makes sense once
   actually side by side (a stretched image/map sitting alone on its
   own full-width row while stacked would look wrong), so gated the
   same as the hero crop below. */
@media ( min-width: 1150px ) {
    .section__split--stretch {
        align-items: stretch;
    }

    .section__split--stretch .section__split-media {
        aspect-ratio: auto;
    }
}

.section__split--map .section__split-media {
    flex:      1.4 1 0%;
    min-width: min( var(--split-map-media-min, 18rem), 100% );
}

.section__split--map .section__split-content {
    flex:      1 1 0%;
    min-width: min( var(--split-map-content-min, 22rem), 100% );
}

/* modifier for a hero-style photo at 60/40 rather than the base
   50/50, each side keeps its own minimum regardless of the ratio */
.section__split--hero .section__split-media {
    flex:      3 1 0%;
    min-width: min( var(--split-hero-media-min, 20rem), 100% );
}

.section__split--hero .section__split-content {
    flex:      2 1 0%;
    min-width: min( var(--split-hero-content-min, 24rem), 100% );
}

/* SPLIT-SIDE-BY-SIDE-BREAKPOINT: the wide cinematic hero crop only
   suits the side-by-side layout, the stacked state falls back to the
   plain 4/3 default above. This can't itself be driven by the flex-
   wrap (nothing to query), so it's a plain guess at where the hero's
   own minimums above put the actual wrap point - keep it in sync by
   hand if those change. */
@media ( min-width: 1150px ) {
    .section__split--hero .section__split-media {
        aspect-ratio: var(--hero-media-ratio);
        min-height:   24rem;
    }
}


/* ============================================================
   FEATURE GRID
   2, 3, or 4 equal columns. Auto-fills and wraps.
============================================================ */

.section__grid {
    display:               grid;
    grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
    gap:                   clamp( 0.75rem, 1.5vw, 1.25rem );
}

.section__grid--2 {
    grid-template-columns: repeat( auto-fit, minmax( 380px, 1fr ) );
}

.section__grid--4 {
    grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
}


/* ============================================================
   FEATURE CARD
   Used inside .section__grid
============================================================ */

.feature-card {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
    padding:        var(--space-lg);
    background:     var(--card-bg);
    border:         1px solid var(--card-border);
    border-radius:  var(--card-radius);
    box-shadow:     var(--card-shadow);
    transition:     box-shadow var(--transition-base),
                    transform  var(--transition-base);
}

.feature-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform:  translateY( -3px );
}

.feature-card__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            clamp(2.5rem, 5vw, 3.5rem);
    height:           clamp(2.5rem, 5vw, 3.5rem);
    background-color: var(--color-brand-subtle);
    border-radius:    var(--radius-md);
    color:            var(--color-brand);
    flex-shrink:      0;
}

.feature-card__icon svg {
    width:  60%;
    height: 60%;
}

.feature-card__title {
    font-size:   var(--text-h4);
    font-weight: 700;
    color:       var(--color-text);
}

.feature-card__text {
    font-size:   var(--text-body);
    color:       var(--color-text-muted);
    line-height: var(--leading-base);
    flex:        1;
}

/* Dark section variant */
.section--dark .feature-card {
    background: rgba( 255, 255, 255, 0.05 );
    border-color: rgba( 255, 255, 255, 0.1 );
}

.section--dark .feature-card__title {
    color: var(--color-text-inverse);
}

.section--dark .feature-card__text {
    color: var(--color-text-light);
}

.section--dark .feature-card__icon {
    background-color: rgba( 255, 255, 255, 0.1 );
}


/* ============================================================
   TESTIMONIAL CARD
============================================================ */

.testimonial-card {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-md);
    padding:        var(--space-lg);
    background:     var(--card-bg);
    border:         1px solid var(--card-border);
    border-radius:  var(--card-radius);
    box-shadow:     var(--card-shadow);
}

.testimonial-card__quote {
    font-size:   var(--text-lead);
    line-height: var(--leading-loose);
    color:       var(--color-text);
    flex:        1;
}

.testimonial-card__quote::before {
    content:     '\201C';
    font-size:   3em;
    line-height: 0;
    vertical-align: -0.5em;
    color:       var(--color-brand);
    margin-right: 0.1em;
}

.testimonial-card__author {
    display:     flex;
    align-items: center;
    gap:         var(--space-sm);
}

.testimonial-card__avatar {
    width:         48px;
    height:        48px;
    border-radius: var(--radius-full);
    object-fit:    cover;
    flex-shrink:   0;
}

.testimonial-card__name {
    font-weight: 700;
    font-size:   var(--text-body);
    color:       var(--color-text);
    margin-bottom: 0; /* not the last child, base.css's rule wouldn't clear it otherwise */
}

.testimonial-card__role {
    font-size: var(--text-small);
    color:     var(--color-text-muted);
}


/* ============================================================
   HERO SECTION
   Full viewport height with overlay and centered content.
============================================================ */

.section--hero {
    position:   relative;
    min-height: clamp( 480px, 70vh, 800px );
    display:    flex;
    align-items: center;
    padding-block: var(--section-padding-lg);
    overflow:    hidden;
}

.section--hero .section__inner {
    position: relative;
    z-index:  2;
}

.section__hero-bg {
    position:   absolute;
    inset:      0;
    z-index:    0;
}

.section__hero-bg img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.section__hero-bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--hero-overlay);
}

.section--hero h1,
.section--hero h2,
.section--hero p {
    color: var(--color-text-inverse);
}

.section--hero .section__lead {
    color: rgba( 255, 255, 255, 0.85 );
}


/* ============================================================
   STAT / NUMBERS SECTION
============================================================ */

.stat-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
    gap:                   var(--space-xs);
    text-align:            center;
}

.stat-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

/* Icon + number sit side by side; label sits underneath the pair. */
.stat-item__row {
    display:     flex;
    align-items: center;
    gap:         var(--space-xs);
}

.stat-item__number {
    display:     block;
    font-family: var(--font-heading);
    font-size:   var(--text-h3);
    font-weight: 500;
    line-height: 1;
    color:       var(--color-text);
}

.stat-item__label {
    display:     block;
    font-size:   var(--text-small);
    color:       var(--color-text-muted);
    margin-top:  var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.section--dark .stat-item__label {
    color: var(--color-text-light);
}

.stat-item__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            clamp(2.5rem, 5vw, 3rem);
    height:           clamp(2.5rem, 5vw, 3rem);
    border-radius:    var(--radius-full);
    background-color: var(--color-brand-subtle);
    color:            var(--color-text);
}

.stat-item__icon svg {
    width:  40%;
    height: 40%;
}

/* line-flanked caption below the stats, for a detail worth reading
   but secondary to the stats themselves */
.hero-divider {
    display:       flex;
    align-items:   center;
    gap:           var(--space-md);
    margin-top:    calc( var(--space-lg) * 1.5 );
    margin-bottom: 0;
}

.hero-divider__line {
    flex:             1;
    height:           1px;
    background-color: var(--color-border-strong);
}

.hero-divider__text {
    max-width:   40rem;
    text-align:  center;
    font-size:   var(--text-small);
    color:       var(--color-text-muted);
    margin:      0;
}


/* ============================================================
   CONTACT INFO
   Icon-circle + link list, e.g. email/phone. Same icon-circle
   convention as .stat-item__icon / .amenity-item__icon.
============================================================ */

.contact-info {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
    list-style:     none;
    margin:         0;
    padding:        0;
}

.contact-info__item {
    display:     flex;
    align-items: center;
    gap:         var(--space-sm);
}

.contact-info__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            clamp(2.5rem, 5vw, 3rem);
    height:           clamp(2.5rem, 5vw, 3rem);
    border-radius:    var(--radius-full);
    background-color: var(--color-brand-subtle);
    color:            var(--color-text);
    flex-shrink:      0;
}

.contact-info__icon svg {
    width:  45%;
    height: 45%;
}

.contact-info__link {
    color:           var(--color-text);
    text-decoration: none;
}

.contact-info__link:hover {
    text-decoration: underline;
}


/* ============================================================
   GALLERY MOSAIC
   1 large tile, 4 landscape, 2 portrait in the bottom right.
   Stacks to a simple 2-column list on small screens.
============================================================ */

.gallery-mosaic {
    display:               grid;
    grid-template-columns: repeat( 6, 1fr );
    grid-template-rows:    minmax( 100px, 0.8fr ) minmax( 100px, 0.8fr ) minmax( 110px, 0.85fr );
    gap:                   var(--space-sm);
}

.gallery-mosaic__item {
    position:      relative;
    border-radius: var(--radius-md);
    overflow:      hidden;
    background-color: var(--color-surface-alt);
}

.gallery-mosaic__item--1 { grid-column: 1 / span 4; grid-row: 1 / span 2; } /* large */
.gallery-mosaic__item--2 { grid-column: 5 / span 2; grid-row: 1; }
.gallery-mosaic__item--3 { grid-column: 5 / span 2; grid-row: 2; }
.gallery-mosaic__item--4 { grid-column: 1 / span 2; grid-row: 3; }
.gallery-mosaic__item--5 { grid-column: 3 / span 2; grid-row: 3; }
.gallery-mosaic__item--6 { grid-column: 5; grid-row: 3; } /* portrait */
.gallery-mosaic__item--7 { grid-column: 6; grid-row: 3; } /* portrait */

.gallery-mosaic__item img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.gallery-mosaic__caption {
    position:   absolute;
    left:       0;
    right:      0;
    bottom:     0;
    padding:    var(--space-xs) var(--space-sm);
    background: linear-gradient( to top, rgba(0,0,0,0.55), transparent );
    color:      var(--color-text-inverse);
    font-size:  var(--text-small);
}

/* below the mosaic's working width, fall back to a plain flow of
   tiles sized off a minimum comfortable width instead of the curated
   1-large/6-small layout. auto-fit does the column-count math itself,
   so a tile only shares a row with another if there's genuinely room
   for both at that minimum, and a narrow phone naturally lands on
   exactly 1 per row without a second breakpoint to tune by hand. */
@media ( max-width: 640px ) {
    .gallery-mosaic {
        grid-template-columns: repeat( auto-fit, minmax( min( 100%, 20rem ), 1fr ) );
        grid-template-rows:    none;
        grid-auto-rows:        auto;
    }
    .gallery-mosaic__item {
        grid-column:  auto;
        grid-row:     auto;
        aspect-ratio: 4 / 3;
    }
}


/* ============================================================
   AMENITY GRID
   Icon on top, label underneath, capped at 4 columns and reflows
   down on narrower screens. Typically used inside .section--dark.
============================================================ */

.amenity-grid {
    display:               grid;
    grid-template-columns: repeat( 4, 1fr );
    gap:                   var(--space-sm);
}

@media ( max-width: 900px ) {
    .amenity-grid { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 480px ) {
    .amenity-grid { grid-template-columns: 1fr; }
}

.amenity-item {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    gap:              var(--space-sm);
    text-align:       left;
    padding:          var(--space-sm) var(--space-md);
    background-color: rgba( 255, 255, 255, 0.05 );
    border:           1px solid rgba( 255, 255, 255, 0.1 );
    border-radius:    var(--card-radius);
}

.amenity-item__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            clamp(2.5rem, 5vw, 3rem);
    height:           clamp(2.5rem, 5vw, 3rem);
    border-radius:    var(--radius-full);
    background-color: var(--color-brand-subtle);
    color:            var(--color-text);
    flex-shrink:      0;
}

.amenity-item__icon svg {
    width:  40%;
    height: 40%;
}

.amenity-item__label {
    text-align: left;
    font-size: var(--text-small);
    color:     var(--color-text-light);
}


/* ============================================================
   BOOKING CTA
   Full-width green card, info side plus a semi-transparent price
   card on top of the same green. Stacks on small screens.
============================================================ */

.booking-cta {
    display:           grid;
    grid-template-columns: 1fr;
    row-gap:           var(--booking-cta-gap-row);
    column-gap:        var(--booking-cta-gap-column);
    background-color: var(--section-bg-dark);
    border-radius:     var(--booking-cta-radius);
    padding:           var(--booking-cta-padding);
    box-shadow:        var(--card-shadow-hover);
}

@media ( min-width: 640px ) {
    .booking-cta {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.booking-cta__info {
    color:             var(--color-text-inverse);
    display:           flex;
    flex-direction:    column;
    justify-content:   center;
    gap:               var(--space-xs);
}

.booking-cta__info .section__eyebrow {
    color: var(--color-brand-subtle);
}

/* h1-h6 set their own colour explicitly in base.css, so inheriting
   from the wrapper isn't enough, same as .section--dark/.section--brand */
.booking-cta__info h1,
.booking-cta__info h2,
.booking-cta__info h3 {
    color:         var(--color-text-inverse);
    font-size:     var(--booking-cta-heading-size);
    margin-bottom: var(--booking-cta-heading-gap);
}

.booking-cta__info p {
    color: var(--color-text-light);
}

.booking-cta__details {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-md);
    margin-top: var(--space-xs);
}

.booking-cta__detail {
    display:     flex;
    align-items: center;
    gap:         var(--space-xs);
}

.booking-cta__detail-icon {
    display:     flex;
    color:       var(--color-brand-subtle);
    flex-shrink: 0;
}

.booking-cta__detail-icon svg {
    width:  1.25rem;
    height: 1.25rem;
}

.booking-cta__detail-text {
    display:        flex;
    flex-direction: column;
}

.booking-cta__detail-label {
    font-size: var(--text-small);
    color:     var(--color-text-light);
}

.booking-cta__detail-value {
    font-size:   var(--text-small);
    font-weight: 700;
    color:       var(--color-text-inverse);
}

.booking-cta__price-card {
    background-color: rgba( 255, 255, 255, 0.1 );
    border-radius:     var(--booking-cta-price-radius);
    padding:           var(--booking-cta-price-padding);
    display:           flex;
    flex-direction:    column;
    align-items:       center;
    justify-content:   center;
    text-align:        center;
    gap:               var(--space-sm);
}

.booking-cta__price-block {
    display:        flex;
    flex-direction: column;
}

/* not the last child, same fix as .testimonial-card__name above */
.booking-cta__price-block p {
    margin: 0;
}

.booking-cta__price-label {
    font-size: var(--text-small);
    color:     var(--color-text-light);
}

.booking-cta__price {
    font-family: var(--font-heading);
    font-size:   var(--booking-cta-price-size);
    font-weight: 700;
    color:       var(--color-text-inverse);
}

.booking-cta__price span {
    font-size:   var(--text-small);
    font-weight: 400;
    color:       var(--color-text-light);
}

.booking-cta__meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--space-md);
    font-size:   var(--text-small);
    color:       var(--color-text-light);
    list-style:  none;
    margin:      0;
    padding:     0;
}

.booking-cta__meta-item {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-xs);
}

.booking-cta__meta-icon {
    display: flex;
    color:   var(--color-brand-subtle);
}

.booking-cta__meta-icon svg {
    width:  1.125rem;
    height: 1.125rem;
}

.booking-cta__price-card .btn {
    width:         100%;
    padding-block: var(--booking-cta-btn-padding-y);
}

.booking-cta__question {
    text-align: center;
    font-size:  var(--text-small);
    color:      var(--color-text-light);
}


/* ============================================================
   CTA BAND
   Full-width call to action strip above footer.
   Elementor global widget owns the content.
   These styles ensure consistent layout when it renders.
============================================================ */

.cta-band {
    padding-block: var(--section-padding);
    text-align:    center;
}

.cta-band__inner {
    max-width:      var(--content-mid);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
}

.cta-band__heading {
    margin-bottom: var(--space-sm);
}

.cta-band__text {
    font-size:     var(--text-lead);
    color:         var(--color-text-muted);
    margin-bottom: var(--space-lg);
    max-width:     var(--measure-cta);
    margin-inline: auto;
}

.section--dark .cta-band__text {
    color: var(--color-text-light);
}


/* ============================================================
   LOGO STRIP / CLIENTS
============================================================ */

.logo-strip {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             clamp( 1.5rem, 4vw, 3rem );
}

.logo-strip__item img {
    height:    40px;
    width:     auto;
    max-width: 140px;
    object-fit: contain;
    filter:    grayscale(1) opacity(0.5);
    transition: filter var(--transition-base);
}

.logo-strip__item:hover img {
    filter: grayscale(0) opacity(1);
}


/* ============================================================
   RESPONSIVE ADJUSTMENTS
============================================================ */

@media ( max-width: 640px ) {

    /* Reduce feature card padding on small screens */
    .feature-card {
        padding: var(--space-md);
    }

}


/* ============================================================
   ARCHIVE & TAXONOMY HEADER
============================================================ */

.archive-header-wrap {
    background-color: var(--color-surface-alt);
    padding-block:    var(--section-padding-sm);
    border-bottom:    1px solid var(--color-border);
}

.archive-header-wrap__inner {
    max-width:      var(--container-max);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
}

.archive-header__title {
    margin-bottom: var(--space-xs);
}

.archive-header__description {
    max-width:     var(--measure-archive);
    margin-bottom: 0;
    color:         var(--color-text-muted);
}

.archive-header__count {
    margin-top: var(--space-xs);
}

.archive-content {
    padding-block: var(--section-padding);
}

.archive-content__inner {
    max-width:      var(--container-max);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
}


/* ============================================================
   SINGLE POST
============================================================ */

/* ── Hero with featured image ── */

.post-hero {
    position:   relative;
    min-height: clamp( 320px, 50vh, 600px );
    display:    flex;
    align-items: flex-end;
    overflow:   hidden;
}

.post-hero__media {
    position: absolute;
    inset:    0;
}

.post-hero__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.post-hero__overlay {
    position:   relative;
    width:      100%;
    z-index:    2;
    background: linear-gradient( to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100% );
    padding-block: var(--section-padding-sm);
}

.post-hero__inner {
    max-width:      var(--container-max);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
}

.post-hero__category {
    display:        inline-block;
    font-size:      var(--text-label);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-brand);
    margin-bottom:  var(--space-sm);
    text-decoration: none;
}

.post-hero__category:hover {
    color: var(--color-brand-subtle);
}

.post-hero__title {
    color:         var(--color-text-inverse);
    margin-bottom: var(--space-sm);
    max-width:     var(--measure-post-title);
}

/* ── Post header (no featured image) ── */

.post-header {
    background-color: var(--color-surface-alt);
    padding-block:    var(--section-padding-sm);
    border-bottom:    1px solid var(--color-border);
}

.post-header__inner {
    max-width:      var(--content-narrow);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
}

.post-header__category {
    display:        inline-block;
    font-size:      var(--text-label);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-brand);
    margin-bottom:  var(--space-sm);
    text-decoration: none;
}

.post-header__title {
    margin-bottom: var(--space-sm);
}

/* ── Post meta ── */

.post-meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--space-xs);
    font-size:   var(--text-small);
    color:       var(--color-text-muted);
}

.post-meta--hero {
    color: rgba( 255, 255, 255, 0.75 );
}

.post-meta__sep {
    color: var(--color-border-strong);
}

/* ── Post content column ── */

.post-content-wrap {
    max-width:      var(--content-narrow);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
    padding-block:  var(--section-padding);
}

.post-content {
    margin-bottom: var(--space-xl);
}

/* ── Tags ── */

.post-tags {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-sm);
    flex-wrap:   wrap;
    padding-top: var(--space-lg);
    border-top:  1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}

.post-tags__label {
    padding-top: 0.25em;
    flex-shrink: 0;
}

.post-tags__list {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-xs);
}

.post-tags__tag {
    display:          inline-block;
    padding:          0.3em 0.8em;
    background-color: var(--color-surface-alt);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-full);
    font-size:        var(--text-small);
    color:            var(--color-text-muted);
    text-decoration:  none;
    transition:       all var(--transition-fast);
}

.post-tags__tag:hover {
    background-color: var(--color-brand);
    border-color:     var(--color-brand);
    color:            var(--color-text-inverse);
}

/* ── Author bio ── */

.author-bio {
    display:          flex;
    gap:              var(--space-md);
    align-items:      flex-start;
    padding:          var(--space-lg);
    background-color: var(--color-surface-alt);
    border-radius:    var(--radius-md);
    border:           1px solid var(--color-border);
    margin-bottom:    var(--space-xl);
}

.author-bio__img {
    width:         80px;
    height:        80px;
    border-radius: var(--radius-full);
    object-fit:    cover;
    flex-shrink:   0;
}

.author-bio__name {
    font-weight:   700;
    font-size:     var(--text-body);
    margin-bottom: var(--space-xs);
}

.author-bio__text {
    font-size:     var(--text-small);
    color:         var(--color-text-muted);
    margin-bottom: 0;
    line-height:   var(--leading-base);
}

/* ── Post navigation (prev/next) ── */

.post-nav {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           var(--space-sm);
    padding-top:   var(--space-lg);
    border-top:    1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}

.post-nav__item {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-xs);
    padding:        var(--space-md);
    background:     var(--color-surface-alt);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    text-decoration: none;
    transition:     border-color var(--transition-fast),
                    background   var(--transition-fast);
}

.post-nav__item:hover {
    border-color: var(--color-brand);
    background:   var(--color-surface);
}

.post-nav__item--next {
    text-align: right;
}

.post-nav__label {
    color: var(--color-text-muted);
}

.post-nav__title {
    font-weight: 600;
    color:       var(--color-text);
    font-size:   var(--text-small);
    line-height: var(--leading-snug);
}

/* ── Related posts ── */

.related-posts__inner {
    max-width:      var(--container-max);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
    padding-block:  var(--section-padding);
}

.related-posts__heading {
    margin-bottom: var(--space-lg);
}

/* ── Back to blog ── */

.post-back {
    max-width:      var(--container-max);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
    padding-bottom: var(--section-padding);
}


/* ============================================================
   404 PAGE
============================================================ */

.error-404 {
    padding-block: var(--section-padding);
    text-align:    center;
}

.error-404__code {
    display:     block;
    font-family: var(--font-heading);
    font-size:   clamp( 5rem, 20vw, 12rem );
    font-weight: 700;
    line-height: 1;
    color:       var(--color-border);
    margin-bottom: var(--space-sm);
}

.error-404__title {
    margin-bottom: var(--space-sm);
}

.error-404__message {
    color:         var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.error-404 .section__actions {
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.error-404__recent {
    text-align:  left;
    max-width:   400px;
    margin-inline: auto;
    padding-top: var(--space-xl);
    border-top:  1px solid var(--color-border);
}

.error-404__recent-title {
    font-size:     var(--text-h4);
    margin-bottom: var(--space-sm);
}

.error-404__recent-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-xs);
}

.error-404__recent-list a {
    color:           var(--color-brand);
    text-decoration: underline;
    font-size:       var(--text-small);
}

.error-404__recent-list a:hover {
    color: var(--color-brand-hover);
}


/* ============================================================
   SEARCH FORM
   Default WordPress search form styling
============================================================ */

.search-form {
    display:   flex;
    gap:       var(--space-xs);
    max-width: 480px;
    margin-top: var(--space-md);
}

.search-field {
    flex:             1;
    padding:          var(--input-padding-y) var(--input-padding-x);
    font-size:        var(--text-body);
    border:           1px solid var(--color-border-strong);
    border-radius:    var(--radius-sm);
    background:       var(--color-surface);
    color:            var(--color-text);
    transition:       border-color var(--transition-fast);
}

.search-field:focus {
    outline:      none;
    border-color: var(--color-brand);
    box-shadow:   0 0 0 3px rgba( 184, 146, 42, 0.15 );
}

.search-submit {
    padding:          var(--btn-padding-y) var(--btn-padding-x);
    background-color: var(--btn-primary-bg);
    color:            var(--btn-primary-text);
    border:           none;
    border-radius:    var(--radius-sm);
    font-weight:      600;
    cursor:           pointer;
    white-space:      nowrap;
    transition:       background-color var(--transition-fast);
}

.search-submit:hover {
    background-color: var(--btn-primary-bg-hover);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media ( max-width: 640px ) {

    .post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav__item--next {
        text-align: left;
    }

    .author-bio {
        flex-direction: column;
    }

    .author-bio__img {
        width:  60px;
        height: 60px;
    }

}


/* ============================================================
   AUTHOR PROFILE (author.php header)
============================================================ */

.author-profile {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-md);
}

.author-profile__avatar {
    width:         80px;
    height:        80px;
    border-radius: var(--radius-full);
    object-fit:    cover;
    flex-shrink:   0;
}

@media ( max-width: 480px ) {
    .author-profile {
        flex-direction: column;
    }
}


/* ============================================================
   COMMENTS
============================================================ */

.comments-area {
    max-width:      var(--content-narrow);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
    padding-bottom: var(--section-padding);
}

.comments-title {
    font-size:     var(--text-h3);
    margin-bottom: var(--space-lg);
    padding-top:   var(--space-lg);
    border-top:    1px solid var(--color-border);
}

/* Comment list */
.comment-list,
.comment-list .children {
    list-style: none;
    padding:    0;
    margin:     0;
}

.comment-list .children {
    padding-left: var(--space-lg);
    border-left:  2px solid var(--color-border);
    margin-top:   var(--space-md);
}

.comment-item {
    margin-bottom: var(--space-lg);
}

.comment-body {
    background:    var(--color-surface-alt);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-md);
}

.comment-meta {
    margin-bottom: var(--space-sm);
}

.comment-author {
    display:     flex;
    align-items: center;
    gap:         var(--space-sm);
}

.comment-avatar {
    width:         48px;
    height:        48px;
    border-radius: var(--radius-full);
    flex-shrink:   0;
}

.comment-author__info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.comment-author__info .url,
.comment-author__info b {
    font-weight:     700;
    font-size:       var(--text-body);
    color:           var(--color-text);
    text-decoration: none;
}

.comment-date,
.comment-date a {
    font-size:       var(--text-small);
    color:           var(--color-text-muted);
    text-decoration: none;
}

.comment-awaiting-moderation {
    font-size:        var(--text-small);
    color:            var(--color-text-muted);
    font-style:       italic;
    margin-top:       var(--space-xs);
}

.comment-content {
    margin-bottom: var(--space-sm);
}

.comment-footer {
    margin-top: var(--space-sm);
}

.comment-reply-link {
    font-size:       var(--text-small);
    font-weight:     600;
    color:           var(--color-brand);
    text-decoration: none;
}

.comment-reply-link:hover {
    color: var(--color-brand-hover);
}

/* Comment form */
.comment-respond {
    margin-top: var(--space-xl);
}

.comment-respond .comment-reply-title {
    font-size:     var(--text-h3);
    margin-bottom: var(--space-lg);
    padding-top:   var(--space-lg);
    border-top:    1px solid var(--color-border);
}

.comment-respond .comment-reply-title small a {
    font-size:       var(--text-small);
    font-weight:     400;
    color:           var(--color-text-muted);
    text-decoration: none;
    margin-left:     var(--space-sm);
}

.comment-form .form-field,
.comment-form p {
    margin-bottom: var(--space-sm);
}

.comment-form label {
    display:       block;
    font-weight:   600;
    font-size:     var(--text-small);
    margin-bottom: var(--space-xs);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width:         100%;
    padding:       var(--input-padding-y) var(--input-padding-x);
    border:        1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-family:   var(--font-body);
    font-size:     var(--text-body);
    color:         var(--color-text);
    background:    var(--color-surface);
    transition:    border-color var(--transition-fast);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline:      none;
    border-color: var(--color-brand);
}

.comment-form textarea {
    min-height: 140px;
    resize:     vertical;
}

.comments-password {
    padding:       var(--space-md);
    background:    var(--color-surface-alt);
    border-radius: var(--radius-md);
    font-size:     var(--text-small);
    color:         var(--color-text-muted);
}

.no-comments {
    font-size:   var(--text-small);
    color:       var(--color-text-muted);
    font-style:  italic;
    padding-top: var(--space-lg);
    border-top:  1px solid var(--color-border);
}