/* ============================================================
   Foundry Workspaces — Responsive Layer
   ------------------------------------------------------------
   Loaded LAST on the public site (index, about, gallery, blog,
   blog-single, contact, 404). The admin dashboard does not load
   this file and is intentionally untouched.

   Target range: 320px phones -> 28" (2560px+) desktops.

   Breakpoint map (matches the existing template's rhythm):
     <= 400    small phones (iPhone SE, Galaxy A0x)
     <= 575    phones
     <= 767    large phones / small tablets
     <= 991    tablet portrait (iPad, iPad Air/Pro 11")  -> mobile nav
     <= 1199   tablet landscape / iPad Pro 12.9"
     <= 1440   13"-15" laptops
     >= 1600   large desktop
     >= 1920   1080p+ / 24"
     >= 2400   27"-28" and 4K
   ============================================================ */

/* ============================================================
   1. GLOBAL GUARDS
   ============================================================ */

/* Kill sideways scroll caused by full-bleed 100vw blocks.
   `clip` (not `hidden`) is required: `hidden` would create a scroll
   container and break `position: sticky` on .fdry-why__aside. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* Nothing may out-run its column. */
img,
video,
canvas,
svg,
iframe,
table {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Grid/flex children default to min-width:auto, which lets long words
   and wide media blow out the track. */
.fdry-why,
.fdry-why__head,
.fdry-space-grid,
.fdry-plan-grid,
.fdry-loc,
.fdry-loc__head,
.fdry-loc__feats,
.fdry-vals,
.fdry-ablist,
.fdry-abitem,
.fdry-define,
.fdry-abstats,
.footer-widgets,
.post-item-list {
    min-width: 0;
}

.fdry-why > *,
.fdry-space-grid > *,
.fdry-plan-grid > *,
.fdry-loc > *,
.fdry-loc__feats > *,
.fdry-vals > *,
.fdry-ablist > *,
.fdry-abitem > *,
.fdry-define > *,
.post-item {
    min-width: 0;
}

/* Long URLs / unbroken strings in copy and blog bodies. */
.fdry-lead,
.fdry-hero p,
.fdry-feat p,
.fdry-plan ul li,
.fdry-aboutintro__p,
.fdry-define__p,
.post-item-content,
.contact-item-content {
    overflow-wrap: break-word;
}

/* ============================================================
   2. FULL-BLEED FIX (About artwork)
   ------------------------------------------------------------
   .fdry-abart used `width:100vw; left:calc(50% - 50vw)`. 100vw
   includes the scrollbar gutter, so on any desktop browser with a
   classic scrollbar the block overhangs by ~15px and forces a
   horizontal scrollbar. Margin-based bleed + overflow-x:clip on
   body is scrollbar-safe.

   Deliberately NO `margin-top` here: foundry-home.css sets -72px at desktop
   and 28px at <=1100px. This file loads later, so declaring margin-top
   unconditionally would clobber that stacked-layout value and drag the
   artwork up over the copy on tablets. Only the horizontal bleed is
   restated.
   ============================================================ */
.fdry-abart {
    width: auto;
    left: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ------------------------------------------------------------
   About hero must clear the header.
   .main-header is position:absolute and overlays the page, but
   #about-intro (the first section, since the page-header banner was
   removed) only reserved 32px of padding-top. Measured: the eyebrow sat
   ~36px UNDER the logo at 375/768/1280. Reserve the real header height
   (70px mobile / 84px desktop) plus breathing room.
   ------------------------------------------------------------ */
#about-intro {
    padding-top: 118px;
}

/* ============================================================
   3. HERO — viewport height + readability
   ============================================================ */

/* `100vh` on mobile is the LARGE viewport: the hero is taller than the
   visible area while the URL bar is showing, so the CTA sits below the
   fold and the page jumps as the bar hides. `svh` = small viewport
   height: always fits, never reflows. */
@supports (min-height: 100svh) {
    .fdry-hero {
        min-height: 100svh;
    }
}

/* The hero photo's readability veil is a LEFT-TO-RIGHT gradient tuned for
   wide screens. Below ~992px the text column spans into the un-veiled
   right side and the dark copy loses contrast against the photo. Switch
   to the strong top-to-bottom veil for the whole tablet range, not just
   <=720px as before. */
@media only screen and (max-width: 991px) {
    .fdry-hero__bg img {
        object-position: 78% center;
    }

    .fdry-hero__bg::after {
        background: linear-gradient(180deg,
                rgba(247, 243, 237, 0.92) 0%,
                rgba(247, 243, 237, 0.86) 45%,
                rgba(247, 243, 237, 0.78) 100%);
    }

    .fdry-hero__inner {
        padding: 90px 0 60px;
    }

    .fdry-hero p {
        max-width: 100%;
    }
}

/* Landscape phones: a 100vh hero leaves ~380px of usable height, so the
   headline alone fills the screen. Let it size to content instead. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .fdry-hero {
        min-height: auto;
    }

    .fdry-hero__inner {
        padding: 100px 0 48px;
    }

    .fdry-hero h1 {
        font-size: clamp(30px, 5.5vw, 44px);
        margin-bottom: 14px;
    }

    .fdry-hero p {
        margin-bottom: 22px;
    }

    .fdry-hero__cta {
        margin-bottom: 26px;
    }

    .fdry-hero__feats {
        gap: 14px 22px;
    }
}

/* ============================================================
   4. TOUCH / HOVER CAPABILITY
   ------------------------------------------------------------
   Hover-reveal was gated on width (<=575px), which means every
   touch tablet (576-1024px) got content it can never reveal.
   Gate on the `hover` media feature instead.
   ============================================================ */

/* Gallery captions: always visible on any device that can't hover. */
@media (hover: none) {

    .page-gallery .photo-gallery__caption {
        opacity: 1;
        transform: none;
    }
}

/* Don't run translate/scale hover effects on touch — they fire on tap
   and stick. */
@media (hover: none) {

    .fdry-feat:hover,
    .fdry-plan:hover,
    .fdry-tst:hover,
    .fdry-locfeat:hover,
    .fdry-btn--solid:hover,
    .fdry-aboutintro__btn:hover {
        transform: none;
    }

    .fdry-space:hover img,
    .fdry-feat:hover .fdry-feat__img img {
        transform: none;
    }
}

/* Comfortable tap targets (WCAG 2.5.8 -> 24px min, 44px recommended). */
@media (hover: none), (max-width: 991px) {

    .fdry-btn,
    .fdry-tst-arrow,
    .floating-btn,
    .header-btn .btn-default {
        min-height: 44px;
    }

    .fdry-tst-pagination .swiper-pagination-bullet {
        min-width: 14px;
        min-height: 14px;
    }

    /* Footer nav links were 16px tall — hard to hit accurately. Trade the
       li margin for link padding so the target grows to 24px while the
       visual rhythm (29px pitch) stays identical. */
    .footer-nav li {
        margin-bottom: 5px;
    }

    .footer-nav li a {
        padding: 4px 0;
        min-height: 24px;
    }

    .footer-contact-links a,
    .footer-social-links a,
    .readmore-btn,
    .post-item-tags a {
        min-height: 24px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================================
   5. LARGE DESKTOPS — 13" is the floor, 28" is the ceiling
   ------------------------------------------------------------
   The template capped at .container 1500px / .fdry-container 1320px,
   so a 27-28" display rendered a narrow ribbon with huge dead
   margins. Scale the shell and the type ceiling with the viewport.
   ============================================================ */

/* ~1600px+ — 30" at 2x, large 1440p windows */
@media only screen and (min-width: 1600px) {

    .container {
        max-width: 1560px;
    }

    .fdry .fdry-container {
        max-width: 1440px;
    }

    .fdry-section {
        padding: 110px 0;
    }

    /* 14 gallery tiles at 3-up wastes a huge screen */
    .page-gallery .col-lg-4 {
        width: 25%;
    }

    .fdry-loc__media {
        min-height: 520px;
    }
}

/* ~1920px+ — standard 1080p 24", 4K at 200% */
@media only screen and (min-width: 1920px) {

    .container {
        max-width: 1700px;
    }

    .fdry .fdry-container {
        max-width: 1560px;
    }

    .fdry-section {
        padding: 124px 0;
    }

    .fdry-title {
        font-size: clamp(30px, 4vw, 56px);
    }

    .fdry-lead {
        font-size: 18px;
    }

    .fdry-hero h1 {
        font-size: clamp(40px, 6vw, 84px);
        max-width: 860px;
    }

    .fdry-hero p {
        font-size: 19px;
        max-width: 580px;
    }

    .fdry-hero__inner .fdry-container {
        max-width: 1240px;
        padding-left: 64px;
    }

    .fdry-feat h3 {
        font-size: 22px;
    }

    .fdry-feat > .fdry-feat__body > p {
        font-size: 15px;
    }

    .fdry-space {
        min-height: 320px;
    }

    .post-item-content h2 {
        font-size: 24px;
    }
}

/* ~2400px+ — 27"/28" 1440p native and 4K at 150% */
@media only screen and (min-width: 2400px) {

    .container {
        max-width: 1900px;
    }

    .fdry .fdry-container {
        max-width: 1760px;
    }

    .fdry-section {
        padding: 140px 0;
    }

    .fdry-title {
        font-size: clamp(30px, 4vw, 62px);
    }

    .fdry-hero h1 {
        font-size: clamp(40px, 6vw, 92px);
        max-width: 960px;
    }

    .fdry-hero__inner .fdry-container {
        max-width: 1400px;
        padding-left: 80px;
    }

    .fdry-lead,
    .fdry-hero p {
        font-size: 20px;
    }

    .fdry-space {
        min-height: 360px;
    }

    /* Keep the artwork from becoming absurd on a 4K panel */
    .fdry-abart__frame img {
        max-height: 900px;
        object-fit: cover;
    }
}

/* ============================================================
   5b. INNER-PAGE BANNER + ABOUT HERO ART — all desktop widths
   ------------------------------------------------------------
   The Gallery/Blog/Contact banner (.page-header) and the About page's
   overlaid hero illustration were tuned for large desktops only, so they
   ran tall/oversized on common 13"-19" laptop and monitor widths.

   No max-width cap: a 13"/15" FHD laptop at 100% scaling reports 1920 CSS
   px, so capping at 1600 excluded the exact screens this targets.
   ============================================================ */
@media only screen and (min-width: 992px) {

    /* Gallery / Blog / Contact banner: shorter band on laptop-class screens */
    .page-header--compact {
        padding: 150px 0 80px;
    }

    /* About page stats strip: "100+" was sized for desktop */
    .fdry-abstat__num {
        font-size: 22px;
    }

    /* About page hero illustration: 20% smaller, pushed flush right so the
       overlaid copy on the left sits on clear space. `.fdry-abart` clips
       overflow, so right-aligned is as far right as the art can go. */
    .fdry-abart__frame img {
        width: 80%;
        margin-left: auto;
        margin-right: 0;
    }
}

/* ============================================================
   6. LAPTOPS — 13" to 15" (1280-1440)
   ------------------------------------------------------------
   The template's own 1440 rules cover .container. These fill the
   gaps in the .fdry-* layer, which had nothing between 1100px and
   full desktop.
   ============================================================ */
@media only screen and (max-width: 1440px) {

    .fdry .fdry-container {
        max-width: 1180px;
    }

    .fdry-hero__inner .fdry-container {
        padding-left: 32px;
    }

    .fdry-loc__feats {
        gap: 12px;
    }

    .fdry-locfeat {
        padding: 20px 16px;
    }

    .fdry-vals {
        gap: 14px;
    }

    .fdry-val {
        padding: 24px 18px;
    }
}

/* Shift the hero photo toward the right, clear of the left text column.
   `object-position` (the lever used at <=991px) is a no-op here: the photo
   is 1599x984 (~1.63) and a laptop hero is ~1440x800 (~1.8), so `cover`
   scales it to the box WIDTH and leaves zero horizontal slack to pan
   within. Over-widening the img is what creates that slack — the box now
   runs past the right edge (clipped by .fdry-hero's overflow:hidden) and
   only its left portion is on screen, so the subject moves right and the
   left edge stays covered. Scoped above 1199px so tablets and phones keep
   their own object-position framing. */
@media only screen and (min-width: 1200px) and (max-width: 1440px) {

    .fdry-hero__bg img {
        /* the global `img { max-width: 100% }` guard would clamp this back */
        max-width: none;
        width: 115%;
    }
}

/* 13" (1280x800 / 1366x768) — the 5-across rows get tight */
@media only screen and (max-width: 1366px) {

    .fdry-loc__feats,
    .fdry-vals {
        gap: 12px;
    }

    .fdry-locfeat h4,
    .fdry-val h4 {
        font-size: 14.5px;
    }

    .fdry-locfeat p,
    .fdry-val p {
        font-size: 12.5px;
    }

    .fdry-abstat {
        padding: 8px 20px;
        gap: 14px;
    }

    .fdry-abstat__icon {
        font-size: 26px;
    }

    /* 13" laptops are short — don't let a 100vh hero swallow the fold */
    .fdry-hero__inner {
        padding: 48px 0;
    }
}

/* ============================================================
   7. TABLET LANDSCAPE / iPad Pro 12.9" (992-1199)
   ------------------------------------------------------------
   .fdry-* only broke at 1100px, leaving 1100-1199 on desktop
   layout and 992-1100 with no nav-aware tuning.
   ============================================================ */
@media only screen and (max-width: 1199px) {

    .fdry .fdry-container {
        max-width: 100%;
        padding: 0 28px;
    }

    /* 4-up blog cards at ~250px each are unreadable; 3-up fits. */
    .post-item {
        width: calc(33.3333% - 20px);
    }

    .fdry-loc__feats {
        grid-template-columns: repeat(2, 1fr);
    }

    .fdry-vals {
        grid-template-columns: repeat(3, 1fr);
    }

    .fdry-ablist {
        grid-template-columns: repeat(2, 1fr);
    }

    .fdry-feat {
        grid-template-columns: 1.4fr 0.6fr;
    }
}

/* ============================================================
   8. TABLET PORTRAIT — iPad / iPad Air / iPad Pro 11" (768-991)
   ------------------------------------------------------------
   This is where the mobile nav kicks in (navbar-expand-lg).
   ============================================================ */
@media only screen and (max-width: 991px) {

    .fdry .fdry-container {
        padding: 0 24px;
    }

    .fdry-section {
        padding: 76px 0;
    }

    /* Single column: the sticky aside has nowhere to stick to. */
    .fdry-why {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .fdry-why__aside {
        position: static;
        top: auto;
        max-width: 640px;
    }

    .fdry-space-grid,
    .fdry-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fdry-loc,
    .fdry-loc__head {
        grid-template-columns: 1fr;
    }

    .fdry-loc__media {
        min-height: 340px;
    }

    /* Map iframe stretched by flex:1 collapses once the grid stacks. */
    .fdry-loc__media iframe {
        min-height: 340px;
    }

    .fdry-define {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fdry-hero__inner .fdry-container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .fdry-cta {
        padding: 36px 32px;
        gap: 22px;
    }

    /* Header shrinks to 70px below the lg nav breakpoint. */
    #about-intro {
        padding-top: 100px;
    }
}

/* ============================================================
   9. PHONES — large (<= 767)
   ============================================================ */
@media only screen and (max-width: 767px) {

    .fdry .fdry-container {
        padding: 0 18px;
    }

    .fdry-section {
        padding: 60px 0;
    }

    .fdry-why__head,
    .fdry-tst__head,
    .fdry-loc__head {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .fdry-space-grid,
    .fdry-plan-grid {
        grid-template-columns: 1fr;
    }

    .fdry-feat {
        grid-template-columns: 1fr;
    }

    .fdry-feat__img {
        display: none;
    }

    .fdry-feat__body {
        padding: 26px 22px 24px;
    }

    /* The number badge collides with the heading once the card narrows. */
    .fdry-feat__no {
        top: 18px;
        right: 18px;
    }

    .fdry-feat h3 {
        max-width: calc(100% - 42px);
    }

    .fdry-loc__metrics {
        grid-template-columns: 1fr;
    }

    .fdry-loc__feats {
        grid-template-columns: 1fr 1fr;
    }

    .fdry-vals {
        grid-template-columns: 1fr 1fr;
    }

    .fdry-loc__card {
        padding: 28px 22px;
    }

    .fdry-loc__btns .fdry-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .fdry-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 22px;
    }

    .fdry-cta__btns {
        width: 100%;
    }

    .fdry-cta__btns .fdry-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* About */
    .fdry-define__text {
        padding: 36px 24px;
    }

    .fdry-define__media {
        min-height: 240px;
    }

    .fdry-abart {
        margin-top: 24px;
    }

    .fdry-ablist {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-top: 40px;
        padding-top: 34px;
    }

    .fdry-abstats {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 16px;
    }

    .fdry-abstat {
        padding: 16px 8px;
    }

    /* Divider flips from vertical to horizontal when the row stacks. */
    .fdry-abstat + .fdry-abstat::before {
        width: 70%;
        height: 1px;
        left: 15%;
        top: 0;
        transform: none;
    }

    /* Blog */
    .post-item {
        width: calc(50% - 15px);
    }
}

/* ============================================================
   10. PHONES — standard (<= 575)
   ============================================================ */
@media only screen and (max-width: 575px) {

    .fdry-section {
        padding: 52px 0;
    }

    .fdry-hero__inner {
        padding: 84px 0 52px;
    }

    /* Full-width stacked CTAs read better than two half-buttons. */
    .fdry-hero__cta {
        gap: 10px;
        margin-bottom: 36px;
    }

    .fdry-hero__cta .fdry-btn {
        width: 100%;
        justify-content: center;
    }

    .fdry-hero__feats {
        gap: 12px 20px;
    }

    .fdry-hero__feat {
        font-size: 13px;
    }

    .fdry-loc__feats {
        grid-template-columns: 1fr;
    }

    .fdry-vals {
        grid-template-columns: 1fr;
    }

    .fdry-plan {
        padding: 26px 20px;
    }

    /* "Most popular" badge overlapped the plan title at narrow widths. */
    .fdry-plan__tag {
        position: static;
        align-self: flex-start;
        margin-bottom: 14px;
    }

    .fdry-tst {
        padding: 26px 20px;
    }

    .fdry-tst-nav {
        gap: 16px;
        margin-top: 28px;
    }

    /* Blog: 2-up cards at 375px leave ~160px per card. */
    .post-item {
        width: 100%;
    }

    /* Gallery: 2-up stays, captions are already forced visible. */
    .page-gallery .photo-gallery img {
        aspect-ratio: 1 / 1;
    }
}

/* ============================================================
   11. PHONES — small (<= 400)  iPhone SE, Galaxy A0x, 320px
   ============================================================ */
@media only screen and (max-width: 400px) {

    .fdry .fdry-container {
        padding: 0 16px;
    }

    .fdry-hero__inner .fdry-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fdry-hero h1 {
        font-size: clamp(32px, 9vw, 40px);
    }

    .fdry-hero p {
        font-size: 16px;
    }

    /* 2-col checklists at 320px give ~130px per item — wraps every word. */
    .fdry-feat ul {
        grid-template-columns: 1fr;
    }

    .fdry-eyebrow {
        font-size: 11.5px;
        letter-spacing: .14em;
    }

    .fdry-btn {
        padding: 14px 20px;
        font-size: 14.5px;
    }

    /* One gallery tile per row below 400px. */
    .page-gallery .col-6 {
        flex: 0 0 auto;
        width: 100%;
    }

    .fdry-define__text {
        padding: 30px 18px;
    }

    .fdry-loc__card {
        padding: 24px 18px;
    }

    .fdry-loc__btns .fdry-btn {
        width: 100%;
    }

    .fdry-abitem {
        grid-template-columns: 44px 1fr;
        gap: 14px;
    }

    .fdry-abitem__icon {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }
}

/* ============================================================
   12. ACCESSIBILITY
   ============================================================ */

/* The template animates on scroll (WOW/GSAP) and on hover. Respect the
   OS-level reduced-motion setting across the whole public site. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .floating-btn--wa::after {
        animation: none;
    }
}