/* ==========================================================================
   U-LIK RESPONSIVE OVERRIDES
   The Figma file only supplies a single 1440px desktop frame for the
   Homepage — no tablet/mobile frames exist to trace. Breakpoints and
   stacking behavior below follow the desktop design's intent (same
   grouping, same hierarchy) using a conventional 3-tier system:
     Desktop  : ≥1200px  (matches the 1440px canvas at up to 1400px container)
     Tablet   : 768px–1199px
     Mobile   : <768px
   Documented per-section in DESIGN-ANALYSIS.md (Step 4 / Step 10 / QA).
   ========================================================================== */

/* ==========================================================================
   TABLET — 768px to 1199px
   ========================================================================== */
@media (max-width: 1199px) {

  /* ---- Header / Nav: collapse to a slide-out mobile menu ---- */
  .ulik-header__inner {
    padding-block: var(--ulik-space-2);
    /* Left/right padding previously stayed at the desktop 40px gutter at
       every width below 1200px — every other section's .ulik-container
       already steps this down (32px tablet / 20px mobile, see
       ulik-base.css); the header just never followed that same pattern.
       Client screenshot, 2026-09-10: on a phone-width header this read as
       too much empty space on both sides of the logo and burger. */
    padding-inline: var(--ulik-container-gutter-tablet);
  }

  .ulik-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    height: 100vh;
    /* Base .ulik-nav rule (ulik-components.css) sets `align-items: center`
       for its desktop, single-row layout — that rule still applies here
       unless overridden, which vertically centers the whole nav list
       within this 100vh panel instead of letting it sit near the top.
       flex-direction: column + align-items/justify-content: flex-start
       anchors the menu items (and the CTA button below them) to the top
       of the panel instead. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--ulik-color-white);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform var(--ulik-transition-base);
    z-index: var(--ulik-z-mobile-menu);
    padding: 100px var(--ulik-space-5) var(--ulik-space-5);
    overflow-y: auto;
  }

  .ulik-nav.is-open {
    transform: translateX(0);
  }

  /* Always-visible close (X) button inside the panel itself — the header's
     own animated burger-to-X sits underneath this panel (z-index 100 vs.
     the panel's 110) once the menu is open, so it isn't reachable as a
     close control. Positioned in the panel's own top-inset (the 100px
     top padding on .ulik-nav above already clears space here). Client
     request, 2026-09-10. */
  .ulik-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px; /* was var(--ulik-space-5) = 40px — client asked for exactly 20px top/right (2026-09-10) */
    right: 20px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ulik-color-text);
    cursor: pointer;
  }

  .ulik-nav__close svg {
    width: 20px;
    height: 20px;
  }

  .ulik-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ulik-space-4);
    width: 100%;
  }

  .ulik-nav__cta-item {
    width: 100%;
    margin-inline-start: 0;
  }

  .ulik-nav__cta-item .ulik-button {
    width: 100%;
  }

  .ulik-burger {
    display: inline-flex;
  }

  .ulik-header__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--ulik-z-overlay);
  }
  .ulik-header__overlay.is-open {
    display: block;
  }

  /* ---- Hero ---- */
  .ulik-hero__media {
    height: 460px;
  }

  .ulik-hero__card {
    margin-top: -110px;
    max-width: 620px;
  }

  /* ---- About: now stacks to a single column through the whole tablet
     range too (see the "TABLET + MOBILE STACK" block below) — client
     feedback was that the previous "keep 2-col, just tighten the ratio"
     treatment still looked cramped/broken on iPad-width screens, not just
     on phones. ---- */

  /* ---- What's New: keep 2-col but tighten ratio + padding, same pattern
     as About above. ---- */
  .ulik-whatsnew-featured {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ulik-whatsnew-featured__content {
    padding-inline: var(--ulik-space-5);
    padding-block: var(--ulik-space-5);
  }
  .ulik-whatsnew-post {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ulik-space-5);
  }
  .ulik-whatsnew-hero,
  .ulik-whatsnew-hero--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ulik-whatsnew-hero__content {
    padding-inline: var(--ulik-space-5);
    padding-block: var(--ulik-space-6);
  }

  /* ---- Product grid: 3 → 2 columns ---- */
  .ulik-product-card {
    flex-basis: calc((100% - var(--ulik-space-3)) / 2);
  }

  /* ---- Service grid: 3 → 2 columns (capped width forces the wrap; flex
     already centers a short last row on its own) ---- */
  .ulik-service-grid__list {
    max-width: calc(283px * 2 + var(--ulik-space-3));
    margin-inline: auto;
  }

  /* ---- Sustainability: keep side-by-side, tighten media ---- */
  .ulik-sustainability__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ulik-sustainability__media-img {
    min-height: 340px;
  }

  /* ---- Compare Slider Grid: cap width to 2 cards + gap so the pair stays
     centered (same "constrain the flex-wrap group" trick as
     .ulik-service-grid__list above), same breakpoint pattern used
     throughout this block. ---- */
  .ulik-compare-grid__list {
    max-width: calc(460px * 2 + var(--ulik-space-5));
    margin-inline: auto;
  }

  /* ---- Stats bar: wrap 2x2 ---- */
  .ulik-stats-bar__list {
    gap: var(--ulik-space-6) var(--ulik-space-7);
  }
  .ulik-stats-bar__item {
    width: calc(50% - var(--ulik-space-7));
  }

  /* ---- Footer: brand full width, 3 cols below ---- */
  .ulik-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: var(--ulik-space-6);
  }
  .ulik-footer__brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }

  /* ---- About Us: Hero — shorter band on tablet/iPad (60vh) ----
     Targets .ulik-abtus-hero__media, not the outer .ulik-abtus-hero
     wrapper — the wrapper carries no height of its own, and __media's own
     base rule (ulik-components.css) sets a fixed `height: 460px` that a
     min-height on its *parent* can never override. An earlier version of
     this rule set min-height on the wrapper and had no visible effect for
     exactly that reason (2026-09-10 client request: 60vh here, 40vh on
     phone widths below). */
  .ulik-abtus-hero__media {
    height: 60vh;
  }

  /* ---- About Us: Corporate Profile — now stacks to a single column
     through the whole tablet range too, same reasoning as ulik-about
     above (see the "TABLET + MOBILE STACK" block below). ---- */

  /* The stat card is position:absolute at every width already (the base
     rule in ulik-components.css isn't gated behind a media query), so it
     was already overlapping the photo here — but its size (max-width:
     260px, from that same desktop-sized base rule) was never adjusted for
     this tablet range, where the grid above has already gone from
     543fr/628fr to two EQUAL, narrower columns. On a narrower photo the
     same 260px card reads oversized/cramped against it. Sized down here to
     match, same treatment as the ≤767px block below just slightly larger. */
  .ulik-abtus-profile__stat {
    right: var(--ulik-space-3);
    bottom: var(--ulik-space-3);
    max-width: 230px;
    padding: var(--ulik-space-2) var(--ulik-space-3);
  }

  /* ---- About Us: Core Values — 3 → 2 columns ---- */
  .ulik-abtus-values__list {
    grid-template-columns: repeat(2, minmax(0, 283px));
  }

  /* ---- About Us: Facilities — 3 → 2 columns ---- */
  .ulik-abtus-facilities__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---- Scope of Service: flow cards stack, arrows rotate to point down ---- */
  .ulik-scope-flow {
    flex-direction: column;
    align-items: stretch;
  }
  .ulik-scope-flow__arrow svg {
    transform: rotate(90deg);
  }

  /* Finished Product photos: this band (tablet/small-desktop, up to 1199px)
     is where the flow above just went full-width. .ulik-scope-card__photos
     is a 2-column grid (ulik-components.css) at every breakpoint down to
     this one, so each frame's WIDTH here is the same share of the card it
     always was — only the card itself got wider, which made each column
     wider too. Taller frames keep that wider cell looking balanced instead
     of a short, squat strip; the mobile block below (≤767px) drops to a
     single column and sets its own, shorter height once each frame is
     full-card-width again. */
  .ulik-scope-card__photo-frame {
    height: 220px;
  }
  /* .ulik-scope-card--c3's align-self: center (ulik-components.css) is a
     desktop-only fix — it stops the card being stretched vertically to
     match its taller row-siblings there. In this stacked column layout
     "align-self" controls WIDTH, not height (cross-axis flips with
     flex-direction), so that same rule would instead shrink this one
     card to its own content width while Card 1/Card 2 stay full width —
     an equally awkward, narrow, off-center box in the middle of an
     otherwise full-width stack. Resetting to stretch here keeps all
     three cards matching in width, which is what this layout needs. */
  .ulik-scope-card--c3 {
    align-self: stretch;
  }

  /* ---- Scope of Service: Creative Edge — 3 → 2 columns ---- */
  .ulik-scope-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---- Contact Us: keep 2-col but tighten gap + column widths, same
     pattern as About/What's New above. ---- */
  .ulik-contact__grid {
    gap: var(--ulik-space-5);
  }
  .ulik-contact__details {
    flex-basis: 400px;
  }
  .ulik-contact__form {
    flex-basis: 460px;
  }
  .ulik-contact__form-card {
    padding: var(--ulik-space-5);
  }
}

/* ==========================================================================
   ABOUT / CORPORATE PROFILE — TABLET + MOBILE STACK — up to 1199px
   Client feedback (2026-09-10, then again after the first pass): the
   "About" photo+text bands still read as broken/cramped through the whole
   tablet range, iPad included — the old "keep 2-col, just tighten the
   ratio" treatment for 768-1199px was still visibly squeezing a photo +
   multi-paragraph text + checklist + button into two narrow columns. This
   now stacks to a single column (photo on top, full width; content below)
   for every width below the 1200px desktop breakpoint, matching what was
   already happening at true mobile widths. Only these two components get
   this early a stack — About (Homepage) and Corporate Profile (About Us
   page) are the two-column "photo + long text block" pattern in this
   theme; the other tablet 2-column sections (Contact, What's New, Mission)
   carry much less content per side and stay comfortable as tightened
   2-column layouts down to 768px.
   ========================================================================== */
@media (max-width: 1199px) {
  .ulik-about__grid,
  /* This compound-selector duplicate is not decorative — it's the actual
     fix. `.ulik-about--reverse .ulik-about__grid` in ulik-components.css
     (base, no media query) is a 2-class selector; the single-class
     `.ulik-about__grid` rule above has LOWER specificity and can never
     override it, at any viewport, regardless of media queries or file
     load order. That's why Reverse Layout instances of this section were
     confirmed (via computed-style testing, 2026-09-10) to stay a real
     2-column grid at every "stacked" breakpoint shipped so far — cramming
     a full paragraph of text into a ~130px-wide column, with the photo
     vertically centered against that tall text column and appearing to
     float low with empty space above it. Matching the base rule's own
     specificity here is what actually lets this stack. */
  .ulik-about--reverse .ulik-about__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulik-about--reverse .ulik-about__media {
    order: 0;
  }

  .ulik-abtus-profile__grid,
  .ulik-abtus-profile--reverse .ulik-abtus-profile__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulik-abtus-profile--reverse .ulik-abtus-profile__content {
    order: 0;
  }
  .ulik-abtus-profile__media {
    order: -1;
  }
}

/* ==========================================================================
   MOBILE — up to 767px
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- Header / Nav: step the side gutter down again at true phone
     widths, same 40 → 32 → 20px pattern .ulik-container already uses
     (2026-09-10). ---- */
  .ulik-header__inner {
    padding-inline: var(--ulik-container-gutter-mobile);
  }

  .ulik-section,
  .ulik-usp,
  .ulik-product-grid,
  .ulik-about,
  .ulik-service-grid,
  .ulik-stats-bar,
  .ulik-abtus-profile,
  .ulik-abtus-mission,
  .ulik-abtus-values,
  .ulik-abtus-journey,
  .ulik-abtus-facilities {
    padding-top: var(--ulik-space-6);
    padding-bottom: var(--ulik-space-6);
  }

  /* ---- Related/Compatible Products band: less vertical padding on mobile
     than the generic .ulik-section rule above. This element carries both
     the generic .ulik-section class and its own .ulik-product-related
     class — equal specificity, so without this override whichever rule
     happens to load later wins the tie (confirmed live: the generic
     50px — var(--ulik-space-6) — rule was winning, not this section's own
     64px desktop value). Client asked for 40px specifically here
     (2026-09-10). ---- */
  .ulik-product-related {
    padding-top: var(--ulik-space-5);
    padding-bottom: var(--ulik-space-5);
  }

  .ulik-section__header {
    margin-bottom: var(--ulik-space-4);
    gap: var(--ulik-space-2);
  }

  /* ---- Header ---- */
  .ulik-header__logo {
    width: 130px;
    height: 72px;
  }

  /* ---- Hero: stack, drop the overlap so text never sits on a hard image edge ---- */
  .ulik-hero__media {
    height: 320px;
  }

  .ulik-hero__card {
    margin-top: -70px;
    max-width: none;
    padding: var(--ulik-space-4) var(--ulik-space-3);
  }

  /* ---- USP: stack single column ---- */
  .ulik-usp__grid {
    flex-direction: column;
    align-items: center;
    gap: var(--ulik-space-6);
  }
  .ulik-usp__item {
    width: 100%;
    max-width: 340px;
  }

  /* ---- Product grid: single column ---- */
  .ulik-product-card {
    flex-basis: 100%;
  }

  /* ---- Product cards: flat, larger mobile sizes for the photo + text.
     Root cause of "still small"/"still not full" after the desktop-focused
     bump in ulik-products.css: every one of this theme's font-size tokens
     (ulik-tokens.css) is a `clamp()` that fluidly scales between a phone
     floor and a desktop ceiling — e.g. --font-size-28 is
     clamp(1.5rem, 1.3333rem + 0.5556vw, 1.75rem), which only reaches its
     24px floor below ~480px viewport width and doesn't hit its 28px
     ceiling until ~1200px. So the earlier token bump (24→28) was real at
     desktop but only moved the phone-width floor from 22px to 24px — a
     2px difference easy to miss. These flat px overrides bypass the fluid
     floor entirely so mobile gets a size that actually reads as "bigger",
     not just technically larger. Media height also bumped further (260px
     → 320px) so the photo genuinely fills more of a full-width mobile
     card, addressing "the height is also not high enough" specifically at
     phone width (2026-09-10). */
  .ulik-product-card__media {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
  }
  .ulik-product-card__category {
    font-size: 17px;
  }
  /* Scoped to the Products CPT cards specifically (the archive grid, tagged
     `[data-ulik-product-grid]`, and the three "related" strips on the
     single product page, tagged `.ulik-product-grid__list--related`) —
     NOT bare `.ulik-product-card__title` / `__link` / `__body`, which also
     match the unrelated homepage "Our Products" teaser grid element
     (cornerstone/elements/ulik-product-grid.php — see the class-collision
     comment in ulik-products.css). An earlier, unscoped version of this
     rule leaked its title/link font sizes and — worse — its body padding
     into that teaser grid's cards on mobile, pushing their text out of
     alignment with the icon above it and throwing off each card's height
     (client screenshot + DevTools inspection, 2026-09-10). */
  [data-ulik-product-grid] .ulik-product-card__title,
  .ulik-product-grid__list--related .ulik-product-card__title {
    font-size: 26px;
  }
  .ulik-product-card__meta,
  [data-ulik-product-grid] .ulik-product-card__link,
  .ulik-product-grid__list--related .ulik-product-card__link {
    font-size: 17px;
  }
  [data-ulik-product-grid] .ulik-product-card__body,
  .ulik-product-grid__list--related .ulik-product-card__body {
    padding: 18px 20px;
    gap: 12px;
  }

  /* ---- About: stack, image first ---- */
  .ulik-about__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulik-about--reverse .ulik-about__media {
    order: 0;
  }
  .ulik-about__media {
    aspect-ratio: 16 / 10;
  }
  .ulik-about__list-item {
    align-items: center; /* keep the checkmark vertically centered against its text, even when the text wraps to 2 lines on narrow screens */
  }
  .ulik-about__list-icon {
    width: 24px;
    height: 24px;
  }

  /* ---- What's New: stack, same "image first" order as About above.
     reverse_layout's order swap on the Post row is neutralized here for
     the same reason .ulik-about--reverse is — a manual left/right choice
     that only means something in a 2-column layout. ---- */
  .ulik-whatsnew-featured {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulik-whatsnew-featured__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }
  .ulik-whatsnew-featured__content {
    padding-inline: var(--ulik-space-3);
    padding-block: var(--ulik-space-4);
  }
  .ulik-whatsnew-featured__eyebrow {
    font-size: var(--font-size-22);
  }
  .ulik-whatsnew-post {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ulik-space-3);
    padding-block: var(--ulik-space-4);
  }
  .ulik-whatsnew-post__media,
  .ulik-whatsnew-post--reverse .ulik-whatsnew-post__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }
  .ulik-whatsnew-hero,
  .ulik-whatsnew-hero--reverse {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulik-whatsnew-hero__media,
  .ulik-whatsnew-hero--reverse .ulik-whatsnew-hero__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }
  .ulik-whatsnew-hero__content {
    padding-inline: var(--ulik-space-3);
    padding-block: var(--ulik-space-4);
  }
  .ulik-whatsnew-hero__eyebrow {
    font-size: var(--font-size-22);
  }

  /* ---- Service grid: single column ---- */
  .ulik-service-grid__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
    margin-inline: auto;
  }
  .ulik-service-card {
    min-height: 0;
  }

  /* ---- Sustainability: stack, image below content ---- */
  .ulik-sustainability__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulik-sustainability__content {
    padding-block: var(--ulik-space-6) var(--ulik-space-3);
    padding-inline: var(--ulik-container-gutter-mobile);
    max-width: none;
  }
  .ulik-sustainability__stats {
    gap: var(--ulik-space-4);
  }
  .ulik-sustainability__media-img {
    min-height: 240px;
    border-radius: var(--ulik-radius-lg);
  }

  /* ---- Compare Slider Grid: single column, full width cards ---- */
  .ulik-compare-grid__list {
    max-width: 460px;
    margin-inline: auto;
  }
  .ulik-compare-grid__item {
    max-width: none;
  }

  /* ---- Stats bar: 2x2 grid ---- */
  .ulik-stats-bar__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ulik-space-5);
    width: 100%;
  }
  .ulik-stats-bar__item {
    width: auto;
    min-width: 0;
  }

  /* ---- CTA ---- */
  .ulik-cta {
    /* Section-level padding, not the panel's own — client request
       (2026-09-10): 50px on mobile vs. 100px on desktop. */
    padding-block: 50px;
  }
  .ulik-cta__panel {
    padding: var(--ulik-space-6) var(--ulik-space-3);
    border-radius: var(--ulik-radius-lg);
  }

  /* ---- Footer: single column stack ---- */
  .ulik-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--ulik-space-5);
  }
  .ulik-footer__brand {
    grid-column: auto;
    max-width: none;
  }
  .ulik-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ulik-space-2);
  }

  /* ---- Buttons full-width in stacked contexts on mobile ---- */
  .ulik-hero__actions .ulik-button,
  .ulik-cta__actions .ulik-button,
  .ulik-abtus-profile__actions .ulik-button {
    width: 100%;
  }

  /* ---- About Us: Hero — shorter band on phone widths (40vh), tighter
     title padding. Same fix as the tablet override above — targets
     __media directly instead of the non-effective wrapper min-height.
     This is a width-based breakpoint (≤767px), matching every other
     breakpoint in this file, so it applies at phone width regardless of
     orientation (portrait or landscape) — same "mobile" tier the rest of
     the site already uses, per client request (2026-09-10). ---- */
  .ulik-abtus-hero__media {
    height: 40vh;
  }
  .ulik-abtus-hero__title {
    padding: var(--ulik-space-4) var(--ulik-container-gutter-mobile);
  }

  /* ---- About Us: Corporate Profile — stack, photo first (matches ulik-about's mobile order) ---- */
  .ulik-abtus-profile__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulik-abtus-profile--reverse .ulik-abtus-profile__content {
    order: 0;
  }
  .ulik-abtus-profile__media {
    order: -1;
  }
  .ulik-abtus-profile__stat {
    /* Re-affirm the overlay positioning at this breakpoint — the card
       must sit ON TOP of the photo (bottom-right corner), not stack
       below it as a separate block. */
    position: absolute;
    right: var(--ulik-space-3);
    bottom: var(--ulik-space-3);
    max-width: 220px;
    padding: var(--ulik-space-2) var(--ulik-space-3);
  }

  /* ---- About Us: Mission & Culture — stack single column ---- */
  .ulik-abtus-mission__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ulik-space-5);
  }

  /* ---- About Us: Core Values — single column, centered like Service Grid ---- */
  .ulik-abtus-values__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
    margin-inline: auto;
  }

  /* ---- About Us: Our Journey — tighten rail indent ---- */
  .ulik-abtus-journey__list {
    padding-left: 28px;
  }
  .ulik-abtus-journey__dot {
    left: -34px;
  }

  /* ---- About Us: Facilities — single column ---- */
  .ulik-abtus-facilities__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---- Scope of Service: single column throughout, tighter sheet padding ---- */
  .ulik-scope-tabs__list {
    flex-direction: column;
    align-items: stretch;
  }
  .ulik-scope-tabs__tab {
    text-align: center;
  }
  /* Grid (not flex) since ulik-components.css switched .ulik-scope-switch
     to display: grid 2026-09-05 — grid-template-columns: 1fr stacks the
     two segments the same way flex-direction: column used to. The
     desktop-only white-space: nowrap on the label/subtext is relaxed
     back to normal here too, so a genuinely narrow phone can wrap
     instead of overflowing (per client: don't shrink the font to force
     one line — allow natural wrapping on screens too small for it). */
  .ulik-scope-switch {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
  .ulik-scope-switch__label,
  .ulik-scope-switch__subtext {
    white-space: normal;
  }
  /* REVERTED 2026-09-04 per client request: the Finished Product photos
     stack top/bottom on phones instead of sitting side by side, because
     at phone width each side-by-side frame was so narrow the photo read
     as cramped/cropped. Full-width, stacked frames give each photo much
     more room — extended 2026-09-29 to all 4 photos (was 2) when that
     card grew from 2 images to 4; the same "don't squeeze them side by
     side on a narrow phone" reasoning just now stacks four full-width
     frames instead of two.

     .ulik-scope-card__photos is a grid (ulik-components.css), so dropping
     to a single column here is just `grid-template-columns: 1fr` — no
     flex-basis-as-height footgun to route around the way the old flex
     version needed (that's what caused the "photos vanish on phones" bug
     months ago; grid doesn't have that failure mode, see the base rule's
     comment). */
  .ulik-scope-card__photos {
    grid-template-columns: 1fr;
  }
  .ulik-scope-card__photo-frame {
    height: 160px;
  }
  .ulik-scope-creative__sheet {
    padding: var(--ulik-space-4) var(--ulik-space-3);
  }
  .ulik-scope-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---- Contact Us: stack single column, details first (matches source
     order — header/cards/hours read naturally above the form on phones). ---- */
  .ulik-contact__grid {
    flex-direction: column;
    gap: var(--ulik-space-5);
  }
  .ulik-contact__details,
  .ulik-contact__form {
    flex-basis: auto;
    width: 100%;
  }
  .ulik-contact__card,
  .ulik-contact__card-inner--hours {
    padding: var(--ulik-space-3) var(--ulik-space-3);
  }
  .ulik-contact__card-inner {
    gap: var(--ulik-space-3);
  }
  .ulik-contact__form-card {
    padding: var(--ulik-space-4);
  }

  /* ---- Contact Us: WPForms fields — force one field per line on mobile
     only (desktop/tablet untouched). Client feedback (2026-09-10): fields
     were overlapping on phones — WPForms' own default layout can put two
     fields side by side (e.g. its "2 columns" list layout) with widths
     that don't reliably collapse inside this card at phone widths.
     `!important` + both the flex-basis and width property (WPForms uses
     flex for some layouts, fixed/percentage widths for others) covers
     both cases; `display: block` on the container is a further safety net
     if a given WPForms layout isn't flex-based at all. ---- */
  .ulik-contact__form-card .wpforms-field-container {
    display: block;
  }
  .ulik-contact__form-card .wpforms-field {
    display: block !important;
    width: 100% !important;
    flex-basis: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ulik-contact__form-card .wpforms-field + .wpforms-field {
    margin-top: var(--ulik-space-3);
  }

  /* ---- Contact Us: Map — taller aspect on phones so the map stays usable
     instead of shrinking down to a thin strip at the 1212:553 desktop ratio. ---- */
  .ulik-contact-map__frame {
    aspect-ratio: 4 / 5;
  }
}

/* Note: no small-mobile (≤420px) font-size fine-tuning block. The old one
   hand-rolled its own clamp() values, which is exactly the pattern the
   mandatory --font-size-* system replaces — the global tokens already
   scale fluidly down to their minimum at any viewport, so a per-breakpoint
   override would just fight the token instead of layering on top of it. */

/* ==========================================================================
   DESKTOP-ONLY WIDENING — 1200px and up
   The rest of this file is written mobile-first (max-width caps layered
   on top of a desktop-sized base). This is the one exception: a bump that
   should apply ONLY at desktop and leave tablet/mobile exactly as they
   were, so it's written the opposite way (min-width) rather than adding
   a same-value override to every smaller breakpoint.
   ========================================================================== */
@media (min-width: 1200px) {
  /* ---- Product Variants / Compatible Closures & Bottles cards (single
     product page): a bit wider on desktop specifically, per client
     request (2026-09-10) — these are the smaller "related" cards
     (.ulik-product-grid__list--related), not the main archive grid. */
  .ulik-product-grid__list--related {
    grid-template-columns: repeat(auto-fill, 260px);
  }

  /* ---- Scope of Services: all 5 cards in a single row on desktop (client
     request, 2026-09-25) — the base rule (ulik-components.css) is a
     flex-wrap of fixed 283px cards that only fits 4 per row inside the
     container, wrapping the 5th onto its own centered line ("3 + 2"). Grid
     replaces that here, ONLY at desktop: 5 equal-width columns fill the
     full container width so every card fits on one line; tablet/mobile keep
     the original flex-wrap (2-per-row / 1-per-row) untouched. */
  .ulik-service-grid__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .ulik-service-card {
    min-width: 0; /* let a grid item shrink below its old fixed 283px basis instead of overflowing its column */
  }
}