/* Shared typography and content spacing, matching the approved Desert Breeze scale. */
@media (min-width: 641px) {
    body main :is(h1,h2,h3,h4,h5,h6):not(.home-experiences-ref *) { font-size: 32px !important; }
}
@media (min-width: 981px) {
    body main :is(h1,h2,h3,h4,h5,h6):not(.home-experiences-ref *) { font-size: 40px !important; }
    .home-answer-grid, .stay-answer-grid, .experience-answer-grid, .contact-answer-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    }
}
@media (max-width: 640px) {
    body main :is(.home-ref-hero-copy, .stay-hero-copy, .about-hero-copy, .experiences-hero-copy, .gallery-hero-copy, .contact-hero-copy) h1 {
        font-size: 26px !important;
    }
}
body main :is(.home-answer-card, .stay-answer-card, .experience-answer-card, .contact-answer-card) h3 {
    font-size: 22px !important;
}
@media (min-width: 981px) {
    body main :is(.home-answer-card, .stay-answer-card, .experience-answer-card, .contact-answer-card) h3 {
        font-size: 24px !important;
    }
}

/* All text-button labels use the same size across desktop, tablet and mobile. */
:is(.button, .wp-block-button__link, .header-book-panel, .sticky-booking-submit, .sticky-booking-field, .stay-award-button, .stay-review-more, .map-expand-button, .text-link, [data-gallery-filter], input[type="submit"], input[type="button"], input[type="reset"]):not(.home-experiences-ref *) {
    font-size: 13px !important;
}

/* Shared content edge spacing. Header, footer and hero containers are excluded. */
main {
    --stiltz-content-edge: 64px;
    --stiltz-after-hero-space: 96px;
}
@media (max-width: 980px) {
    main { --stiltz-content-edge: 32px; --stiltz-after-hero-space: 72px; }
}
@media (max-width: 640px) {
    main { --stiltz-content-edge: 20px; --stiltz-after-hero-space: 56px; }
}
main > section:not(:is([class*="hero"], .home-final-ref, .about-book-cta, .home-experiences-ref)) > :is(.stiltz-shell, .stiltz-wide),
main > .stiltz-shell,
main > .about-architecture {
    width: min(1400px, calc(100% - var(--stiltz-content-edge) * 2)) !important;
    margin-inline: auto !important;
}
/* Give Your Stay more width while preserving the shared content gutters. */
#your-stay.home-stay-ref { padding-top: var(--stiltz-after-hero-space); }
#your-stay .home-stay-grid-ref,
#home-location .home-story-grid-ref {
    width: min(1400px, calc(100% - var(--stiltz-content-edge) * 2)) !important;
}
@media (min-width: 641px) and (max-width: 980px) {
    #your-stay .home-stay-grid-ref,
    #home-location .home-story-grid-ref { max-width: 680px; }
}

/* Keep the stay details divider inside the content edge. */
#your-stay .home-stay-types-ref::before { right: 0; }

/* Let the review widget shrink with its containing column. */
.home-quote-inner-ref, .about-reviews-inner { grid-template-columns: minmax(0, 1fr); }
.home-quote-feature-ref, .about-reviews-widget { min-width: 0; max-width: 100%; }

/* Keep the contact map within the same edges as its section content. */
main .contact-map-panel img { width: 100%; max-width: 100%; margin-inline: 0; }

@media (max-width: 640px) {
    main .knut-place-image { margin-inline: 0; }
}

/* Long contact links wrap inside the mobile content column. */
main .contact-item { grid-template-columns: 24px minmax(0, 1fr); }
main .contact-item a { overflow-wrap: anywhere; }
main .contact-answer-card { overflow-wrap: anywhere; min-width: 0; }

/* Stacked text uses the section gutter once, without another inner side inset. */
@media (max-width: 980px) {
    #your-stay .home-stay-copy-ref { padding-inline: 0; }
    main :is(.about-architecture-copy, .about-commitment-copy) {
        width: 100%;
        padding-inline: 0;
    }
}

/* Balance the Your Stay photo with more spacious copy. */
@media (min-width: 981px) {
    #your-stay .home-stay-grid-ref {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        column-gap: clamp(40px, 5vw, 72px);
    }
    #your-stay .home-stay-copy-ref { padding-inline: 0; }
    #your-stay .home-stay-photo-ref { align-self: center; }
    #your-stay .home-stay-slider-ref { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
}

/* Keep the About story photograph inside its content frame. */
main .about-story-image img { transform: none; }

/* Breathing room between the Your Stay text groups and room options. */
@media (min-width: 641px) {
    #your-stay .home-stay-copy-ref .eyebrow { margin-bottom: 12px; }
    #your-stay .home-stay-copy-ref .home-rule { margin: 24px 0; }
    #your-stay .home-stay-copy-ref p { line-height: 1.7; }
    #your-stay .home-stay-types-ref { margin: 28px 0 24px; }
    #your-stay .home-stay-types-ref a { padding-block: 20px; gap: 12px; }
    #your-stay .home-stay-types-ref span { line-height: 1.2; }
    #your-stay .home-stay-proofs-ref { gap: 12px 20px; margin-bottom: 28px; }
}
@media (min-width: 641px) and (max-width: 980px) {
    #your-stay .home-stay-grid-ref { column-gap: 28px; }
}

/* Match the Stay accommodation sliders: inset frame and centred cream arrows. */
#your-stay .home-stay-slider-ref {
    aspect-ratio: 3 / 2;
    background: var(--stiltz-soft);
    overflow: hidden;
}
#your-stay .home-stay-slider-ref::after {
    border: 1px solid rgba(255,255,255,.52);
    content: '';
    inset: 18px;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}
#your-stay .home-stay-slider-ref img { transform: none; }
#your-stay .home-stay-slider-ref img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#your-stay .home-stay-slider-controls-ref { inset: 0; display: block; }
#your-stay .home-stay-slider-dots-ref { display: none; }
#your-stay .home-stay-slider-arrow-ref {
    background: #FAF8F3;
    border: 1px solid rgba(36,35,32,.16);
    height: 44px;
    width: 44px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
#your-stay .home-stay-slider-arrow-ref.prev { left: 28px; }
#your-stay .home-stay-slider-arrow-ref.next { right: 28px; }
#your-stay .home-stay-slider-arrow-ref:hover,
#your-stay .home-stay-slider-arrow-ref:focus-visible {
    background: #fff;
    color: var(--stiltz-timber);
    transform: translateY(-50%) scale(1.04);
}

/* Mirror Your Stay's columns: Location copy left, full map right. */
@media (min-width: 641px) {
    #home-location .home-story-grid-ref {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        column-gap: 28px;
    }
    #home-location .home-story-copy-ref p { max-width: none; }
}
@media (min-width: 981px) {
    #home-location .home-story-grid-ref {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        column-gap: clamp(40px, 5vw, 72px);
    }
}

/* Alternate the desktop flow below Location: answers left, heading right. */
@media (min-width: 981px) {
    #home-questions .home-answers-inner {
        grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
    }
    #home-questions .home-answers-heading { grid-column: 2; grid-row: 1; }
    #home-questions .home-answer-grid { grid-column: 1; grid-row: 1; }
}

/* Subtle, consistent separation between every Good to know card. */
main :is(.home-answer-grid, .stay-answer-grid, .experience-answer-grid, .contact-answer-grid) {
    gap: 12px;
}

/* Vertically balance every Good to know heading beside its answer cards. */
main :is(.home-answers-heading, .stay-answers-heading, .experience-answers-heading, .contact-answers-heading) {
    align-self: center;
}

/* Match the opening About story to the four established lower image/text panels. */
.about-page .about-story { padding: var(--stiltz-after-hero-space) 0; }
.about-page .about-story-grid {
    align-items: stretch;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-page .about-story-image { height: 100%; min-height: 0; overflow: hidden; }
.about-page .about-story-image img {
    display: block;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}
.about-page .about-story-copy {
    align-self: center;
    max-width: none;
    padding: clamp(56px, 8vw, 120px);
}
@media (min-width: 981px) {
    /* Trim the bottom of the photo while retaining its width and original framing. */
    .about-page .about-story-grid { height: auto; min-height: 700px; }
    .about-page .about-story-image { position: relative; height: auto; }
    .about-page .about-story-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: max(800px, 100%);
    }
    .about-page .about-story-copy { padding-block: 32px; }
}
@media (max-width: 980px) {
    .about-page .about-story-grid { grid-template-columns: 1fr; }
    .about-page .about-story-image { height: clamp(420px, 66vw, 520px); }
    .about-page .about-story-copy { padding-inline: 0; }
}
@media (max-width: 640px) {
    .about-page .about-story-copy { padding-block: 54px; }
}

/* Separate the garden-image panel from the aerial photograph above it. */
.about-page .about-aerial + .about-architecture {
    margin-top: var(--stiltz-after-hero-space);
}

/* Centre the Stay review introduction beside the changing review content. */
.stay-page-full .stay-reviews-intro { align-self: center; }

/* Give the Contact details and form equal room and a more comfortable gap. */
@media (min-width: 981px) {
    .contact-page .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(40px, 5vw, 70px);
    }
    .contact-page .contact-details h2,
    .contact-page .contact-details > p { max-width: none; }
}

/* Match the home Location proportions, with the Contact map remaining on the left. */
@media (min-width: 981px) {
    .contact-page .contact-location-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        column-gap: clamp(40px, 5vw, 72px);
    }
}

/* Gallery filters: bring categories closer to the banner. */
.gallery-page-full .gallery-index { padding-top: 78px; }
@media (max-width: 640px) {
  .gallery-page-full .gallery-index { padding-top: 39px; }
}

/* Balance the accommodation introduction between the hero and sunset image. */
.stay-page-full .stay-paths-intro { padding-top: 80px; padding-bottom: 60px; }
@media (min-width: 981px) {
    .stay-page-full .stay-paths-intro { padding-top: 100px; padding-bottom: 75px; }
}
@media (max-width: 640px) {
    .stay-page-full .stay-paths-intro { padding-top: 56px; padding-bottom: 42px; }
}

/* Centre each review within the shared slider height, including short entries. */
.stay-page-full .stay-reviews-intro { align-self: center; }
.stay-page-full .stay-review-track { align-items: center; }

/* Subtle footer colour refinements using this site's accent. */
.site-footer { --footer-accent: #8E6B45; }
.site-footer .footer-social a { background: var(--footer-accent); border-color: var(--footer-accent); color: #FFFFFF; }
.site-footer .footer-social a:is(:hover, :focus-visible) { background: #76583A; border-color: #76583A; color: #FFFFFF; }
.site-footer .footer-link-row { border-top-color: rgba(142, 107, 69, .2); border-bottom-color: rgba(142, 107, 69, .2); }
.site-footer .footer-link-row a:is(:hover, :focus-visible) { color: var(--footer-accent); }
.site-footer .footer-award-label { color: #4A4640; }
.site-footer .footer-awards-list a:is(:hover, :focus-visible) .footer-award-label { color: var(--footer-accent); }

/* Align the Awards and sister-lodge headings at the top of their columns. */
.site-footer .footer-recognition { align-items: start; }

/* Use The Stiltz accent on the condensed Phase 2 booking button. */
body .site-header.is-condensed .header-book-panel {
    background: #8E6B45;
    border-color: #8E6B45;
    color: #FFFFFF;
}
body .site-header.is-condensed .header-book-panel:is(:hover, :focus-visible) {
    background: #76583A;
    border-color: #76583A;
    color: #FFFFFF;
}

/* Use the lodge accent for the Contact form submit button. */
.contact-page #contact-form { scroll-margin-top: 160px; }
.contact-page .contact-form [role="status"] { color: #8E6B45; }
.contact-page .contact-form [type="submit"] { background: #8E6B45; border-color: #8E6B45; color: #FFFFFF; }
.contact-page .contact-form [type="submit"]:is(:hover, :focus-visible) { background: #76583A; border-color: #76583A; color: #FFFFFF; }

/* Balance visible contact content and form edges in the two-column layout. */
@media (min-width: 981px) {
    .contact-page .contact-grid { align-items: stretch; }
    .contact-page .contact-form { margin-block: 0; padding-block: 0; }
    .contact-page .contact-details { display: flex; flex-direction: column; }
    .contact-page .contact-details h2 { margin-bottom: 20px; }
    .contact-page .contact-details > p { margin-bottom: 0; }
    .contact-page .contact-rule { margin-block: 35px; flex-shrink: 0; }
    .contact-page .contact-list { flex: 1; align-content: space-between; gap: 35px; margin-top: 0; }
    .contact-page .contact-item p { line-height: 1.55; }
}