/* ==========================================================================
   WudGres — responsive layer
   Loaded LAST on every page, after master.css and the theme sheets.
   Desktop (>=992px) is left untouched; everything here targets tablet + phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stop horizontal overflow
   The series pages use .min-vw-100 / .vw-100 (100vw) which overflows once a
   vertical scrollbar exists, and is meaningless on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .vw-100,
  .min-vw-100 { width: 100% !important; min-width: 0 !important; }

  img, svg, video, iframe, canvas { max-width: 100%; height: auto; }

  .row { --bs-gutter-x: 1.5rem; margin-left: 0; margin-right: 0; }
  .container, .container-fluid { padding-left: 18px; padding-right: 18px; }
}

/* --------------------------------------------------------------------------
   2. Viewport-height sections
   vh-100 / min-vh-100 on a phone traps content in a full-screen box.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .min-vh-100,
  .vh-100 { min-height: 0 !important; height: auto !important; }

  /* .horizontal-scroller is height:100vh for the pinned desktop interaction;
     once stacked it must grow with its content or the panels get clipped. */
  .horizontal-scroller { height: auto !important; }
  .horizontal-scroller-scroll { padding: 18px !important; }
  .horizontal-scroller-image { padding-top: 0 !important; }

  section.d-flex.flex-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
}

/* --------------------------------------------------------------------------
   3. Hero / feature imagery
   Series pages pin images to height:650px inline. Cap them so the copy that
   follows is reachable without a long scroll.
   NOTE: cover is right for decorative/lifestyle shots, but a PRODUCT shot must
   never be cropped — those are handled in section 10.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .custom-border-radius-1,
  .media-panel {
    height: auto !important;
    max-height: 62vh !important;
    min-width: 0 !important;
    width: 100% !important;
    object-fit: cover;
  }
  /* horizontal parallax spans read as jitter on touch */
  [data-scroll-direction="horizontal"] { transform: none !important; }
}

@media (max-width: 575.98px) {
  .custom-border-radius-1,
  .media-panel { max-height: 48vh !important; }
}

/* --------------------------------------------------------------------------
   4. Rhythm + type
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  section { padding-top: 42px; padding-bottom: 42px; }

  /* the theme leans on p-5 (48px) inside every panel — far too much on a phone */
  .p-5 { padding: 24px !important; }
  .pt-5 { padding-top: 24px !important; }
  .pb-5 { padding-bottom: 24px !important; }
  .pd-t-100 { padding-top: 48px !important; }
  .pd-b-100 { padding-bottom: 48px !important; }
  .mrt-50 { margin-top: 24px !important; }
  .mt-5 { margin-top: 24px !important; }
}

/* --------------------------------------------------------------------------
   4b. One type scale for the whole site on mobile
   Page titles ranged from 28px to 60px depending on which theme class the page
   happened to use, and some pages rendered h3 larger than h2. These selectors
   are deliberately over-specific so they beat the theme's own !important
   rules (.page-header-modern h1 etc.).
   Scale: 32 / 24 / 19 / 17 — 16px body.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  html body h1,
  html body .page-header h1,
  html body .custom-text-10,
  html body .hero-title,
  html body .custom-hero-font-2 { font-size: 32px !important; line-height: 1.12 !important; }

  html body h2,
  html body .sec-title,
  html body .custom-hero-font-5 { font-size: 24px !important; line-height: 1.2 !important; }

  html body h3 { font-size: 19px !important; line-height: 1.25 !important; }
  html body h4 { font-size: 17px !important; line-height: 1.3 !important; }
  html body h5, html body h6 { font-size: 15px !important; line-height: 1.35 !important; }

  html body p,
  html body .lead,
  html body li { font-size: 16px !important; line-height: 1.6 !important; }

  html body .text-9,
  html body .text-8,
  html body .text-7 { font-size: 21px !important; line-height: 1.25 !important; }

  h1, h2, h3, h4 { text-wrap: pretty; overflow-wrap: break-word; }
}

@media (max-width: 400px) {
  html body h1,
  html body .page-header h1,
  html body .custom-text-10,
  html body .custom-hero-font-2 { font-size: 27px !important; }
  html body h2, html body .sec-title { font-size: 21px !important; }
}

/* --------------------------------------------------------------------------
   4c. Tablet step (768–991.98px)
   The mobile *layout* rules (64px fixed header, stacked sections, 3-up grid)
   run to 991.98px, but the type scale stopped at 767.98px — so a tablet got a
   compact mobile header under a 60px desktop headline. This bridges the gap.
   Scale: 44 / 28 / 21 / 18 — 16px body.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  html body h1,
  html body .page-header h1,
  html body .custom-text-10,
  html body .hero-title,
  html body .custom-hero-font-2 { font-size: 44px !important; line-height: 1.1 !important; }

  html body h2,
  html body .sec-title,
  html body #collectionHeading,
  html body .custom-hero-font-5 { font-size: 28px !important; line-height: 1.2 !important; }

  html body h3 { font-size: 21px !important; line-height: 1.25 !important; }
  html body h4 { font-size: 18px !important; line-height: 1.3 !important; }
  html body h5, html body h6 { font-size: 16px !important; line-height: 1.35 !important; }

  html body p,
  html body .lead,
  html body li { font-size: 16px !important; line-height: 1.6 !important; }

  html body .text-9,
  html body .text-8,
  html body .text-7 { font-size: 24px !important; line-height: 1.25 !important; }

  h1, h2, h3, h4 { text-wrap: pretty; overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .team-card { padding: 0 !important; }
  .team-card .team-card_content { padding: 0 18px 18px !important; }
  #productsGrid .team-card { padding: 12px !important; }
  #productsGrid .team-card_img { padding: 4% !important; }
  #productsGrid .team-card_title { font-size: 14px !important; }
}

/* --------------------------------------------------------------------------
   5a. Category tiles — ONE per row on phones (doors.html, nfc.html)
   The source renders are near-square (≈1836×1900), so the image box is kept
   square: a landscape crop would slice the top and bottom off the door.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .team-card_img {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
  }
  .team-card_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
  }
  /* full-width tile can carry a proper title size */
  .team-card_title { font-size: 17px !important; line-height: 1.2; letter-spacing: .01em; }
  .team-card::after { height: 42%; }
}

/* --------------------------------------------------------------------------
   5b. Inline images leave a descender gap under them — kill it site-wide
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .team-card_img img,
  .dn-blog-thumb img,
  .footer img,
  .horizontal-scroller-image,
  .img-fluid { vertical-align: middle; }
  .team-card_img { line-height: 0; font-size: 0; }
}

/* --------------------------------------------------------------------------
   6. Tables — scroll rather than break the page
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .table-responsive,
  .table-responsive-wrap,
  .specs-sheet {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: 13.5px; }
  table th, table td { padding: 8px 10px !important; white-space: normal; }
}

/* --------------------------------------------------------------------------
   7. Touch targets (WCAG 2.5.8 — 44px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .btn,
  .specs-btn,
  .view-products-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer a,
  .wg-crumbs__item a { min-height: 40px; display: inline-flex; align-items: center; }
  .social-links a,
  .footer-social-icons a {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   8. Breadcrumbs + page header
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .wg-crumbs__list { flex-wrap: wrap; row-gap: 2px; }
  .page-header { padding-top: 70px !important; padding-bottom: 48px !important; }
  /* catalogue download tiles */
  .dn-link-btn { font-size: 13px !important; line-height: 1.4; }
}

/* Breadcrumb legibility floor spans the whole mobile+tablet range, not just
   phones — at 769px the theme dropped it to 11px. */
@media (max-width: 991.98px) {
  .wg-crumbs,
  .wg-crumbs__item,
  .wg-crumbs__item a { font-size: 12.5px !important; }
}

/* --------------------------------------------------------------------------
   9. Header — sticky on mobile, with a solid ground so nothing shows through
   The theme header is .header-transparent and overlays the hero. Transparent
   is fine at the very top; once the page scrolls it must be opaque or the
   content slides visibly underneath it.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #header .header-body {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1030;
    height: 64px !important;
    min-height: 64px !important;
    transition: background-color .25s ease, box-shadow .25s ease;
  }
  #header .header-container,
  #header .header-container > .header-row,
  #header .header-column,
  #header .header-column > .header-row {
    height: 64px !important;
    min-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }
  #header .header-logo,
  #header .header-logo a { height: auto !important; min-height: 0 !important; }
  #header .header-logo img { height: 34px !important; width: auto !important; }

  /* opaque once scrolled (class toggled by the theme's sticky script) */
  #header.header-floating-icons .header-body,
  #header .header-body.header-body-bottom-border,
  html.sticky-header-active #header .header-body,
  #header[class*="sticky"] .header-body {
    background: rgba(13, 13, 13, .96) !important;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .3);
  }
}

/* Real measured header height on small screens — the breadcrumb sheet assumes
   100px, which is the desktop value and leaves a dead band on a phone. */
@media (max-width: 991.98px) {
  :root { --wg-header-h: 64px; }
}

/* --------------------------------------------------------------------------
   9b. Page-header heroes
   .wg-crumbs-host forces padding-top: header + 28px. With the smaller mobile
   header that now resolves correctly, but the title block also carries .mt-5
   (48px) which pushes the h1 out of the hero. Tighten the pair.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .page-header {
    padding-top: calc(var(--wg-header-h) + 22px) !important;
    padding-bottom: 34px !important;
  }
  .page-header .row.mt-5 { margin-top: 10px !important; }
  .page-header h1,
  .page-header .custom-text-10 { margin-bottom: 0; }

  /* The overlay variant sits absolutely on top of hero copy on small screens.
     Put it back in the flow so it can never collide with the headline. */
  .wg-crumbs--over {
    position: static !important;
    top: auto !important;
    margin-bottom: 14px;
    pointer-events: auto;
  }

  /* Series-page heroes are plain sections starting at y=0, so the fixed header
     would sit on top of their first line. Push them clear. They are nested
     several divs deep inside .smoothScroll (not a direct child of .main), so
     match on the hero itself rather than on document position. The full-bleed
     video hero is exempt — the header is meant to float over it. */
  .main > section:first-child:not(.page-header),
  .main .vh-100.min-vh-100:not(.page-header),
  section:has(> .wg-crumbs--over),
  section:has(> .container > .wg-crumbs--over) {
    padding-top: calc(var(--wg-header-h) + 18px) !important;
  }
  .main > section:first-child:has(.marketing-hero-video),
  .main .vh-100.min-vh-100:has(.marketing-hero-video) {
    padding-top: 0 !important;
  }
  .wg-crumbs-host { padding-top: calc(var(--wg-header-h) + 22px) !important; }

  /* These heroes are short on copy, so rule 2's generic height:auto reset
     leaves them squashed to a thin band. Give them their full-height look
     back — content is short enough here that it can't get trapped — sized
     so the visible box (after the header-clearance padding above eats into
     it) still reads as a full screen. */
  .main .vh-100.min-vh-100:not(.page-header) {
    min-height: calc(100vh + var(--wg-header-h) + 18px) !important;
  }
}

/* --------------------------------------------------------------------------
   10. Door detail page
   The product shot is the whole point of the page — show the entire door,
   never a crop. `contain` + a light ground reads as a product plate.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .min1024p, .min1024t { width: 100% !important; max-width: 100% !important; }
  .max768t { margin-top: 26px; }

  .team-inner-thumb { background: #f6f4f1; border-radius: 10px; padding: 14px; }
  .team-inner-thumb img,
  .media-slide {
    width: 100% !important;
    height: auto !important;
    max-height: 58vh !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .specs-row { grid-template-columns: 1fr !important; row-gap: 4px; }
  .specs-label { font-weight: 700; }
  .team-inner-thumb img,
  .media-slide { max-height: 52vh !important; }
}

/* --------------------------------------------------------------------------
   11. Page-specific caps
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .tabview { height: auto !important; min-height: 0 !important; }
  #circleSection, .circle-expand { min-height: 0 !important; }
}

/* --------------------------------------------------------------------------
   13. Horizontal scrollers → vertical stacks on phone/tablet
   Every side-scrolling strip becomes a normal column: side-scroll is easy to
   miss on touch and hides content behind an invisible affordance.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* homepage blog strip */
  .scroll-container,
  .blog-scroll-wrapper .scroll-container {
    display: block !important;
    overflow-x: visible !important;
    white-space: normal !important;
  }
  .scroll-container.flex-nowrap { flex-wrap: wrap !important; }
  .blog-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-right: 0 !important;
    margin-bottom: 22px !important;
  }
  .blog-card:last-child { margin-bottom: 0 !important; }
  /* the dot pager only makes sense for a carousel */
  .blog-dots { display: none !important; }

  /* generic: any inline-flex strip that scrolls sideways.
     Tables are deliberately excluded — they still need to scroll. */
  .scroll-container[style*="overflow-x"],
  .blog-scroll-wrapper[style*="overflow-x"] { overflow-x: visible !important; }
}

/* --------------------------------------------------------------------------
   12b. Anything still wider than the viewport gets clamped
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  [style*="min-width: 70%"],
  [style*="min-width:70%"] { min-width: 0 !important; }
  [class*="transform3d"] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   15. Hero video — no dead bands above or below
   100vh on mobile is measured against the *largest* viewport (toolbars
   retracted), so the section ends up taller than the visible area and leaves
   a strip of section background. svh tracks the actual visible height.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .marketing-hero-video {
    height: 100svh;
    min-height: 520px;
    max-height: 100svh;
    line-height: 0;
    background-color: #000;
  }
  .hero-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
  }
  /* the wrapping section must not add rhythm padding around a full-bleed hero */
  section:has(> .marketing-hero-video) {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
  }
  .marketing-hero-video + * { margin-top: 0 !important; }
}

/* --------------------------------------------------------------------------
   16. Wide tables — make the scroll discoverable instead of silently clipped
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .table-responsive {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* right-edge fade cues that there is more table off-screen */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .table-responsive table { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   17. Minimum legible type
   The theme's footer inherits an 11.7px base — too small to read on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .footer,
  .footer p,
  .footer li,
  .footer a,
  .footer-bottom,
  .footer-widgets-wrapper { font-size: 14px !important; line-height: 1.6; }
  .footer h5, .footer h6, .footer .widget-title { font-size: 15px !important; }
  small, .text-2, .text-1 { font-size: 13px !important; }
}

/* --------------------------------------------------------------------------
   18. Hero "Scroll" cue
   Was inlined per-page only in index.html's <head>. The About Us and series
   heroes point to this same component but had no shared definition to draw
   on, so it's centralised here — loaded on every page — instead of repeating
   the block in each page's <head>. Not media-scoped: shows at every width,
   matching the home hero.
   -------------------------------------------------------------------------- */
.scroll-more-container {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 500;
  opacity: 0.9;
  animation: wgScrollFadeIn 1.5s ease-in-out 1;
}

/* On these heroes specifically, rule 9b makes the section taller than one
   screen (extra room for the header-clearance padding), so bottom:30px lands
   below the first screenful instead of near it. Anchor from the viewport
   instead of the section's own (inflated) height so the cue still sits just
   above the fold. The home video hero stays bottom-anchored — its section is
   exactly 100vh, so bottom:30px is already correct there. */
@media (max-width: 991.98px) {
  .main .vh-100.min-vh-100 .scroll-more-container {
    bottom: auto;
    top: calc(100vh - 60px);
  }
}

.scroll-text {
  display: inline-block;
  position: relative;
  padding: 0 20px;
}

.scroll-text i {
  margin: 0 6px;
  font-size: 14px;
  color: #fff;
}

.custom-arrow-anim {
  animation: wgArrowMove 1.4s infinite;
}

@keyframes wgArrowMove {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(6px); opacity: 1; }
}

@keyframes wgScrollFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}