/* =============================================================================
 * RESPONSIVE FIXES — Canada Elite Build Group
 *
 * Targeted fixes for mobile/tablet rendering issues across recently added
 * features. Loaded AFTER main.css so it can override where needed.
 *
 * Breakpoints used:
 *   - ≤1100px: large tablet / small desktop transition
 *   - ≤960px:  tablet portrait
 *   - ≤720px:  phone landscape / large phone
 *   - ≤480px:  standard phone portrait
 *   - ≤360px:  small phone (iPhone SE, etc.)
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 1) HERO CARDS — View Completed Projects + Hero CTA card on mobile
 * --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .builders-hero-v2__card {
    width: 100% !important;
    min-height: 280px !important;
  }
  .hero-cta-card {
    padding: 22px 20px 24px !important;
    min-height: 240px !important;
  }
  .hero-cta-card__title {
    font-size: clamp(20px, 4.6vw, 26px) !important;
  }
  .hero-cta-card__copy {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}
@media (max-width: 480px) {
  .hero-cta-card {
    padding: 18px 18px 20px !important;
    min-height: 220px !important;
  }
  .hero-cta-card__btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
}

/* Disable hover scale on touch devices — feels off when tapped */
@media (hover: none) and (pointer: coarse) {
  .hero-cta-card:hover,
  .one-team-card:hover,
  .metal-subdivision-card:hover,
  .compact-card:hover {
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------------
 * 2) HERO TYPOGRAPHY + PILLS on small phones
 * --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .builders-hero-v2__title {
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
  }
  .builders-hero-v2__copy {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .hero-pills {
    gap: 6px !important;
  }
  .hero-pills .pill {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  /* Hero CTA buttons go full-width and stack */
  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-prequalify {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center;
    justify-content: center;
  }
  .hero-cta-builders a.wp-block-button__link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* -----------------------------------------------------------------------------
 * 3) SUBDIVISION CARDS — 4-up grid for Cabinetry/Doors/Glass/Subfloor
 * --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .metal-subdivisions__grid--4,
  .portfolio-subdivisions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .metal-subdivision-card {
    min-height: 160px !important;
  }
  .metal-subdivision-card__label {
    font-size: 13px !important;
    letter-spacing: 0.5px;
  }
  .metal-subdivision-card__icon {
    width: 36px !important;
    height: 36px !important;
  }
}
@media (max-width: 360px) {
  .metal-subdivisions__grid--4,
  .portfolio-subdivisions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* -----------------------------------------------------------------------------
 * 4) ONE TEAM GRID + cards — 6 services on phone
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .one-team-card {
    min-height: 200px !important;
  }
  .one-team-card__title {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .one-team-card__tagline {
    font-size: 12px !important;
  }
  .one-team-card__icon {
    width: 36px !important;
    height: 36px !important;
  }
  .one-team-card__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .one-team-section__title {
    font-size: clamp(28px, 7vw, 36px) !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
  }
}

/* -----------------------------------------------------------------------------
 * 5) CABINETRY CAROUSEL — touch + nav buttons on mobile
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cabinetry-carousel__nav {
    width: 36px !important;
    height: 36px !important;
    opacity: 0.85 !important;
  }
  .cabinetry-carousel__nav svg {
    width: 16px !important;
    height: 16px !important;
  }
  .cabinetry-carousel__nav--prev {
    left: 8px !important;
  }
  .cabinetry-carousel__nav--next {
    right: 8px !important;
  }
  /* Smaller carousel slides on mobile */
  .cabinetry-carousel .carousel-slide {
    width: clamp(220px, 70vw, 320px) !important;
    height: auto !important;
  }
}

/* -----------------------------------------------------------------------------
 * 6) POPUPS (services + category-gallery) — mobile layout
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .services-popup__panel,
  .category-gallery__panel {
    width: 96vw !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
  }
  .category-gallery__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .category-gallery__close,
  .services-popup__close {
    width: 38px !important;
    height: 38px !important;
    top: 12px !important;
    right: 12px !important;
  }
}
@media (max-width: 480px) {
  .category-gallery__grid {
    grid-template-columns: 1fr !important;
  }
  .category-gallery__title-wrap .section-title {
    font-size: 20px !important;
  }
}

/* -----------------------------------------------------------------------------
 * 7) QUOTE FORM — single column on mobile
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .quote-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .quote-form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .quote-form input,
  .quote-form select,
  .quote-form textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
  .quote-form button[type="submit"] {
    width: 100% !important;
  }
  .quote-upload__cta {
    padding: 24px 16px !important;
  }
}

/* -----------------------------------------------------------------------------
 * 8) 404 PAGE — inline styles tuning for mobile
 * --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .error-page .error-hero {
    padding: 110px 0 60px !important;
  }
  .error-page .error-hero h1 {
    font-size: clamp(32px, 8vw, 44px) !important;
  }
  .error-page .error-hero p {
    font-size: 15px !important;
  }
  .error-page .error-hero a {
    padding: 14px 26px !important;
    font-size: 14px !important;
  }
  .error-page .error-services {
    padding: 60px 0 !important;
  }
  .error-page .error-services h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
}

/* -----------------------------------------------------------------------------
 * 9) LEGAL PAGES (Privacy + Terms) — better mobile reading
 * --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .legal-page section[style*="padding: 130px"] {
    padding: 110px 0 50px !important;
  }
  .legal-page h1 {
    font-size: clamp(28px, 7vw, 36px) !important;
  }
  .legal-page h2 {
    font-size: 20px !important;
    margin-top: 32px !important;
  }
  .legal-page section[style*="padding: 80px"] {
    padding: 50px 0 !important;
  }
  .legal-page section[style*="line-height: 1.8"] {
    font-size: 15px !important;
  }
  .legal-page ul {
    padding-left: 18px !important;
  }
}

/* -----------------------------------------------------------------------------
 * 10) FOOTER — stack columns on mobile
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .footer-grid,
  .site-footer-grid,
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center;
  }
  .footer-social {
    justify-content: center !important;
  }
  .footer-bottom,
  .footer-copyright {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
}

/* -----------------------------------------------------------------------------
 * 11) WHY CHOOSE US / HOW WE WORK / etc — common section grids
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .reasons-grid,
  .why-grid,
  .compact-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* compact cards (used in Cabinetry "What We Do") */
  .compact-card {
    padding: 22px 18px !important;
  }
  .compact-card h3 {
    font-size: 16px !important;
  }
  .compact-card p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}

/* -----------------------------------------------------------------------------
 * 12) ANIMATIONS — respect prefers-reduced-motion on mobile
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Slightly faster reveals on mobile so users don't wait scrolling */
  .reveal-up {
    transition-duration: 0.6s !important;
  }
  /* Carousel auto-scroll: slower on mobile so users can read */
  .cabinetry-carousel__track {
    animation-duration: 80s !important;
  }
  .hero-bg-slide {
    transition-duration: 1.5s !important;
  }
}

/* -----------------------------------------------------------------------------
 * 13) GENERAL — prevent horizontal overflow on any element
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html, body {
    overflow-x: hidden !important;
  }
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Containers with explicit padding don't bleed off the edge */
  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* -----------------------------------------------------------------------------
 * 14) HEADER / NAV — sticky size + spacing on mobile
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .nav,
  header.nav {
    padding: 12px 0 !important;
  }
  .nav-inner,
  .wp-block-navigation__container {
    padding: 0 16px !important;
  }
  /* NOTE: logo size on mobile is governed by main.css (64px @ ≤560px).
     We do NOT override it here so the logo keeps its intended size. */
  /* Hamburger sits next to phone CTA */
  .nav .wp-block-navigation__responsive-container-open {
    width: 42px !important;
    height: 42px !important;
  }
}

/* -----------------------------------------------------------------------------
 * 14b) DESKTOP HEADER — items horizontal sin wrap
 * Después de agregar Home, el nav tiene 5 items + logo + phone.
 * Ampliamos el container y aplicamos nowrap para que TODO quepa horizontal.
 * --------------------------------------------------------------------------- */
@media (min-width: 961px) {
  /* Container MÁS amplio en desktop (selectores fuertes para ganar al
     main.css que lo fija en 1300px con un selector específico). */
  .nav > .container.nav-inner,
  header.site-header .nav .nav-inner.container,
  .nav .container.nav-inner,
  .nav .nav-inner {
    width: min(1640px, calc(100% - 48px)) !important;
    max-width: 1640px !important;
    padding-left: clamp(20px, 2vw, 40px) !important;
    padding-right: clamp(20px, 2vw, 40px) !important;
  }

  /* Más espacio entre el LOGO y el grupo del menú */
  .nav .nav-inner {
    gap: clamp(40px, 5vw, 96px) !important;
  }

  /* Navigation container: NO wrap, items en línea */
  .nav .wp-block-navigation__container,
  .nav .wp-block-navigation,
  .nav .nav-links {
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  /* MÁS gap entre items del menú */
  .nav .wp-block-navigation__container,
  .nav .nav-links {
    gap: clamp(22px, 2vw, 40px) !important;
  }

  /* Font size cómodo (con más espacio ya cabe a 13-14px) */
  .nav .wp-block-navigation-item__content,
  .nav-links > li > a {
    font-size: clamp(12px, 0.9vw, 14px) !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap !important;
  }

  /* Logo: tamaño fijo (NO reducir — mantiene los 140px del main.css), no se estira */
  .nav .logo,
  .nav .wp-block-site-logo {
    flex-shrink: 0;
  }
  /* NOTE: logo height is governed by main.css (.nav .logo img = 140px).
     We intentionally do NOT override it here so the logo keeps its size. */
}

/* En 961–1200px (laptop pequeño) — un poco más compacto pero con aire */
@media (min-width: 961px) and (max-width: 1200px) {
  .nav .wp-block-navigation-item__content,
  .nav-links > li > a {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
  }
  .nav .wp-block-navigation__container,
  .nav .nav-links {
    gap: 18px !important;
  }
  /* Gap logo↔menú más moderado en laptop pequeño para que todo quepa */
  .nav .nav-inner {
    gap: clamp(24px, 3vw, 48px) !important;
  }
}

/* -----------------------------------------------------------------------------
 * 15) PORTFOLIO / GALLERY MOSAIC — better mobile stack
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .gallery-mosaic,
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .gallery-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
 * 16) iOS SAFARI: 100vh fix
 * iOS Safari counts the URL bar as part of viewport sometimes —
 * use 100dvh (dynamic) where possible.
 * --------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  .hero,
  .builders-hero-v2,
  .services-popup,
  .category-gallery,
  .portfolio-modal {
    min-height: 100dvh;
  }
}

/* -----------------------------------------------------------------------------
 * 17) FOCUS-VISIBLE — better keyboard accessibility on mobile (Bluetooth kb)
 * --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--soft-gold, #BFA987);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -----------------------------------------------------------------------------
 * 18) HEADER spacing — push content below sticky nav
 * --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  main#primary,
  main.site-main {
    padding-top: 0;
  }
  /* Heroes already have top padding for sticky nav clearance */
}

/* -----------------------------------------------------------------------------
 * Doors page: grid 5 columnas (entry/windows/garage/patio/aluminum)
 * --------------------------------------------------------------------------- */
.metal-subdivisions__grid--4:has(> .metal-subdivision-card:nth-child(5)) {
  grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 1100px) {
  .metal-subdivisions__grid--4:has(> .metal-subdivision-card:nth-child(5)) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 700px) {
  .metal-subdivisions__grid--4:has(> .metal-subdivision-card:nth-child(5)) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 360px) {
  .metal-subdivisions__grid--4:has(> .metal-subdivision-card:nth-child(5)) {
    grid-template-columns: 1fr !important;
  }
}

/* -----------------------------------------------------------------------------
 * BLOG HERO — centrar TODO el contenido (eyebrow, título, intro, filtros)
 * --------------------------------------------------------------------------- */
.blog-hero .inner-hero__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
/* Eyebrow with side-lines centered */
.blog-hero .eyebrow,
.blog-hero .eyebrow--lines {
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Back button (category/tag archives) — centered, not flush-left */
.blog-hero .blog-archive-back,
.blog-hero .blog-single-hero__back {
  margin: 0 auto 18px !important;
}
/* Filter pills — ONE centered single row on desktop/tablet. */
.blog-filter-pills,
.blog-filter-pills--centered {
  display: flex !important;
  flex-wrap: nowrap !important;       /* keep all buttons on a single line */
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 24px auto 0 !important;
  max-width: none !important;          /* allow the row to use full hero width */
  overflow-x: auto;                    /* safety net: scroll instead of break if a 6th category is ever added */
  scrollbar-width: none;               /* hide the scrollbar (Firefox) */
}
.blog-filter-pills::-webkit-scrollbar,
.blog-filter-pills--centered::-webkit-scrollbar { display: none; }
.blog-filter-pills .pill,
.blog-filter-pills--centered .pill {
  white-space: nowrap;                 /* never break a label onto 2 lines */
}
/* Phones: a single nowrap row would overflow, so wrap gracefully there. */
@media (max-width: 600px) {
  .blog-filter-pills,
  .blog-filter-pills--centered {
    flex-wrap: wrap !important;
    max-width: 360px !important;
  }
}

/* -----------------------------------------------------------------------------
 * BLOG HEROES — centered text + company photo background (all blog heroes).
 *   1) Archive/blog-home hero: photo bg comes from the inline style on the
 *      section; just give it a comfortable height so the photo reads well.
 *   2) Single-post hero: was bottom/left-aligned — now fully centered.
 * --------------------------------------------------------------------------- */
/* Top padding is sized to clear the FIXED nav, which is as tall as the logo:
   logo 140px → header ~176px (desktop), 90px → ~126px (≤900), 64px → ~100px
   (≤768). We add ~70px breathing room on top of the header height at each
   breakpoint. Top-anchored (flex-start) so tall content never overflows up. */
/* NOTE: must out-specify main.css `section.inner-hero.blog-hero` (0,2,1) which
   sets `padding !important` AND `background !important` — both win over a plain
   `.blog-hero--photo` and over the inline style. We match its element+class
   chain and add `.blog-hero--photo` so this wins, then restore the photo bg. */
section.inner-hero.blog-hero.blog-hero--photo,
section.inner-hero.about-hero.blog-hero.blog-hero--photo,
section.inner-hero.subfloor-hero.blog-hero.blog-hero--photo {
  min-height: 60vh;
  display: flex !important;
  align-items: flex-start !important;
  padding: 250px 0 80px !important;   /* header 176px + ~74px gap */
  background:
    linear-gradient(180deg, rgba(20,20,22,0.74) 0%, rgba(20,20,22,0.68) 55%, rgba(20,20,22,0.82) 100%),
    url('../images/BG_Canada_Elite_Build_Group.webp') center / cover no-repeat !important;
}
@media (max-width: 900px) {
  section.inner-hero.blog-hero.blog-hero--photo,
  section.inner-hero.about-hero.blog-hero.blog-hero--photo,
  section.inner-hero.subfloor-hero.blog-hero.blog-hero--photo { padding: 195px 0 70px !important; } /* header ~126px */
}
@media (max-width: 768px) {
  section.inner-hero.blog-hero.blog-hero--photo,
  section.inner-hero.about-hero.blog-hero.blog-hero--photo,
  section.inner-hero.subfloor-hero.blog-hero.blog-hero--photo { min-height: 52vh; padding: 165px 0 56px !important; } /* header ~100px */
}

/* Single-post hero — horizontally centered text, but TOP-anchored vertically
   so tall titles never overflow up into the fixed nav. */
.blog-single-hero.blog-single-hero--centered {
  align-items: flex-start !important;
  text-align: center;
  padding-top: 250px !important;      /* header 176px + ~74px gap */
}
@media (max-width: 900px) {
  .blog-single-hero.blog-single-hero--centered { padding-top: 195px !important; }
}
@media (max-width: 768px) {
  .blog-single-hero.blog-single-hero--centered { padding-top: 165px !important; }
}
.blog-single-hero--centered .blog-single-hero__content {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blog-single-hero--centered .blog-single-hero__title {
  margin-left: auto;
  margin-right: auto;
}
.blog-single-hero--centered .blog-single-hero__meta {
  justify-content: center;
}
/* Back button — centered, BELOW all the hero text (last item in the stack). */
.blog-single-hero--centered .blog-single-hero__back {
  position: static;
  margin: 22px auto 0 !important;
}

/* -----------------------------------------------------------------------------
 * 19) ABOUT US team collage — 2 fotos horizontal stacked
 * Selectores fuertes para ganar al main.css (que define grid-areas de 2 filas
 * y deja una fila vacía = el gap que el cliente ve).
 * --------------------------------------------------------------------------- */
.about-team-section .about-team-collage__photos.about-team-collage__photos--stacked,
.about-team-collage__photos.about-team-collage__photos--stacked {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;   /* auto, no fr — sin fila fantasma */
  grid-template-areas: none !important;        /* anula "wide wide"/"left right" */
  gap: 18px !important;
}
.about-team-section .about-team-collage__photos--stacked .about-team-photo,
.about-team-collage__photos--stacked .about-team-photo {
  grid-area: auto !important;                  /* anula wide/left/right */
  grid-column: 1 / -1 !important;
  width: 100% !important;
  aspect-ratio: 16 / 7 !important;             /* horizontal panorámico */
  height: auto !important;
  overflow: hidden;
  border-radius: 18px;
}
.about-team-section .about-team-collage__photos--stacked .about-team-photo img,
.about-team-collage__photos--stacked .about-team-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;          /* centra la foto, sin gap */
  display: block !important;
}

/* =============================================================================
 * PRODUCT COLLECTIONS — Premium Door & Window Systems page
 * Windows / Entry Doors / Patio Doors / Garage Doors / Aluminum Solutions
 * ============================================================================= */
.pds-collections {
  padding: 24px 0 70px;   /* tighter top — sits closer to What We Do above */
  background: var(--ivory, #F7F2EA);
  color: var(--charcoal, #2D2D2E);
  overflow-x: clip;        /* contain the 100vw full-bleed dark bands */
}
.pds-collections__head {
  text-align: center;
  max-width: 1040px;   /* wider so the title fits on one line */
  margin: 0 auto 30px;
}
.pds-collections__head .section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  margin: 12px 0 14px;
}
/* Keep the title on ONE line on desktop */
@media (min-width: 980px) {
  .pds-collections__head .section-title { white-space: nowrap; }
}
/* Gold divider spacing within the section */
.pds-collections__divider {
  max-width: 1100px;
  margin: 8px auto 4px;
}
.pds-collections__head p {
  color: #5a554e;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
}

/* Each product group — contiguous bands (no gaps), vertical padding gives rhythm */
.pds-group {
  margin-bottom: 0;
  padding: 44px 0;
  position: relative;
}
.pds-group > * { position: relative; z-index: 1; }

/* Full-bleed alternating LIGHT band (entry-doors + garage-doors).
   A lighter, warmer cream than the base ivory (#F7F2EA) so the section change
   reads clearly without the heavy contrast of the dark green. Text stays dark. */
.pds-group--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #FFFDF8;   /* lighter warm cream, lifts off the ivory base */
  z-index: 0;
}
/* Light bands keep the normal dark header text (no flip needed). */

.pds-group__header {
  margin-bottom: 28px;
  max-width: 820px;
}
.pds-group__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--soft-gold, #BFA987);
  margin-bottom: 8px;
}
.pds-group__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--charcoal, #2D2D2E);
}
.pds-group__intro {
  color: #5a554e;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* Cards grid */
.pds-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pds-card {
  background: #fff;
  border: 1px solid rgba(45,45,46,0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(45,45,46,0.05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
}
.pds-card:hover {
  transform: translateY(-5px);
  border-color: var(--soft-gold, #BFA987);
  box-shadow: 0 16px 40px rgba(45,45,46,0.12), 0 0 18px rgba(191,169,135,0.25);
}
.pds-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1a1b;
}
.pds-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.pds-card:hover .pds-card__media img { transform: scale(1.05); }
.pds-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pds-card__material {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--soft-gold, #BFA987);
  margin-bottom: 8px;
}
.pds-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--charcoal, #2D2D2E);
}
.pds-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: #5a554e;
  margin: 0;
}
.pds-group__note {
  margin-top: 20px;
  font-size: 14px;
  font-style: italic;
  color: #6b665e;
  padding-left: 14px;
  border-left: 3px solid var(--soft-gold, #BFA987);
}

/* Responsive */
@media (max-width: 1000px) {
  .pds-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pds-collections { padding: 60px 0 70px; }
  .pds-cards { grid-template-columns: 1fr; gap: 16px; }
  .pds-group { margin-bottom: 52px; }
  .pds-group__header { text-align: center; margin-left: auto; margin-right: auto; }
  .pds-group__note { text-align: left; }
}

/* Spec-sheet collection cards (Classic/Heritage/Heritage Max) — show full
   sheet without cropping the embedded text. */
.pds-card__media--contain { background: #fff; }
.pds-card__media--contain img { object-fit: contain !important; padding: 8px; }

/* PDS — In Motion video showcase (door/window install videos).
   Videos are phone-recorded VERTICAL (9:16) — display them portrait and
   centered so the full clip is visible (no heavy cropping).
   Full-bleed light-cream band (same #FFFDF8 as the alternating sections). */
.pds-motion {
  margin-top: 16px;
  padding: 48px 0 56px;   /* equal breathing room top & bottom */
  position: relative;
}
.pds-motion > * { position: relative; z-index: 1; }
.pds-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #FFFDF8;   /* lighter warm cream band */
  z-index: 0;
}
.pds-motion__head { text-align: center; max-width: 760px; margin: 0 auto 24px; }
.pds-motion__grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}
.pds-motion__item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(45,45,46,0.12);
  position: relative;
  background: #1a1a1b;
  width: 300px;            /* portrait card width */
  max-width: 80vw;
}
.pds-motion__video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;    /* vertical phone video */
  object-fit: cover;
  display: block;
}
.pds-motion__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
}
@media (max-width: 700px) {
  .pds-motion__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* =============================================================================
 * CABINET (FSE block page) — collapse the block-gap around "What We Do" so the
 * spacing matches the PHP service pages (Metal/Doors/Glass), which render
 * sections back-to-back with no block gap.
 * .entry-content scopes this to the FSE cabinet page ONLY (PHP service pages
 * use .site-main, not .entry-content).
 * ============================================================================= */
.entry-content .metal-subdivisions#what-we-do {
  margin-top: 0 !important;        /* remove FSE block-gap above the section */
  padding-top: 56px !important;    /* tighter top, closer to the hero */
  padding-bottom: 64px !important; /* tighter bottom, closer to next section */
}
/* Kill the block-gap on whatever pattern follows What We Do */
.entry-content .metal-subdivisions#what-we-do + * {
  margin-top: 0 !important;
}

/* CABINET hero now uses the shared .builders-hero-v2 layout (identical to the
   other service pages) — text left, square card right, both centered. No
   page-specific hero overrides needed. */

/* =============================================================================
 * CABINET hero (FSE) — make it identical to the PHP service heroes.
 * 1) Full-bleed: FSE constrains .entry-content children to content-width,
 *    which squished the hero (cramped grid, colliding buttons). Break out to
 *    full viewport width like the PHP service pages.
 * 2) Darker scrim: kitchen photos are bright; the base scrim is too light for
 *    white text. Match the doors-hero scrim darkness.
 * ============================================================================= */
.entry-content .service-cabinet-hero.builders-hero-v2 {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  /* Match `.service-page .hero` EXACTLY. The cabinet page is FSE (.landing-page),
     so it never matched that rule and kept the `.hero` base min-height:100vh,
     making the hero full-screen while the other services collapse to ~content
     height. These two lines bring it to parity with Metal/Glass/Doors/Subfloor. */
  min-height: auto !important;
  padding: 180px 0 80px !important;
}
@media (max-width: 1024px) {
  .entry-content .service-cabinet-hero.builders-hero-v2 {
    padding: 160px 0 60px !important;   /* matches .service-page .hero @1024 */
  }
}
@media (max-width: 720px) {
  .entry-content .service-cabinet-hero.builders-hero-v2 {
    padding: 130px 0 50px !important;   /* matches .service-page .hero @720 */
  }
}
/* Pills/actions spacing — the .service-page/.audience-page rules don't reach the
   FSE cabinet hero, so the pill collided with the button. Re-add it here. */
.service-cabinet-hero .hero-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.service-cabinet-hero .hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Darker scrim for legibility over bright cabinetry photos */
.service-cabinet-hero .builders-hero-v2__scrim {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.40) 45%,
    rgba(0,0,0,0.62) 100%) !important;
}

/* =============================================================================
 * SERVICE HERO — rotating background (5 project photos, subtle crossfade).
 * Replaces the single .builders-hero-v2__bg with stacked .hero-rota__slide
 * layers. main.js rotates `.is-active`. Sits at the same z-index as the static
 * bg (0), under the scrim (1) and content (10).
 * ============================================================================= */
.builders-hero-v2__bg.hero-rota,
.home-hero-v2__bg.hero-rota {
  animation: none !important;   /* ken-burns moves per-slide instead */
  overflow: hidden;
}
/* The home hero bg normally starts at opacity:0 + scale(1.06) and is faded in
   by the `ce-hero-bg-in` entry animation on .is-revealed. We kill that animation
   above (the slides handle motion), so force the container visible — otherwise
   it stays at opacity:0 and the hero looks black. */
.home-hero-v2__bg.hero-rota {
  opacity: 1 !important;
  transform: none !important;
}
.hero-rota__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity, transform;
  transform-origin: center center;
  backface-visibility: hidden;
  /* Ken-burns runs on EVERY slide, perfectly in sync, so toggling
     `.is-active` only changes opacity — the transform never resets.
     This eliminates the zoom "snap" on the out-going slide. */
  animation: ce-hero-bg-kenburns 24s ease-in-out infinite alternate;
}
.hero-rota__slide.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rota__slide { transition: opacity 0.4s ease; animation: none; }
}

/* =============================================================================
 * MOBILE FIXES (phone QA) — logo size, footer column centering, hero trust
 * pillars alignment, and phone CTA inside the mobile menu overlay.
 * ============================================================================= */

/* 1) Header logo a touch bigger on mobile (~20% — there was room). */
@media (max-width: 900px) {
  .nav .wp-block-site-logo img,
  .nav .logo img,
  .nav .logo .custom-logo { height: 108px !important; }
}
@media (max-width: 768px) {
  .nav .wp-block-site-logo img,
  .nav .logo img,
  .nav .logo .custom-logo { height: 78px !important; }
}

/* 2) Footer columns: the Navigation + Services nav lists were left-aligned
 *    while the rest centered on mobile. Center them too. */
@media (max-width: 768px) {
  footer .footer-col { text-align: center; }
  footer .wp-block-navigation.footer-links,
  footer .wp-block-navigation.footer-links > ul {
    align-items: center !important;
    justify-content: center !important;
  }
  footer ul.footer-links { text-align: center !important; padding-left: 0 !important; list-style: none; }
}

/* 3) Home hero trust pillars: same max-width as the "View Completed Projects"
 *    cards + centered, so the mini-section lines up with the container on mobile. */
@media (max-width: 700px) {
  .home-hero-v2__trust-inner {
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 4) Phone link inside the mobile menu overlay: a tel: item is added to the
 *    nav menu so it appears under "Contact" on mobile. On desktop the floating
 *    .nav-call-cta button already shows the number, so hide the in-nav tel link
 *    there (scoped to .wp-block-navigation so the floating button is untouched). */
@media (min-width: 901px) {
  .nav .wp-block-navigation a[href^="tel:"] { display: none !important; }
}

/* =============================================================================
 * MOBILE FIXES — PHASE 2 (phone QA round 2)
 * Home hero (trust overlap + eyebrow 3-line), footer centering, blog hero
 * crop, doors PDS card black-line, subfloor worker stacking, cabinet materials,
 * about founders photo full-view.
 * ============================================================================= */

/* 5) HOME HERO — trust pillars strip was pulled UP under the cards via a
 *    desktop -50px margin + a fixed 180px height (4 pillars overflow on a phone
 *    where they stack to 1 column). Neutralise the overlap on mobile so the
 *    pillars sit cleanly BELOW the "View Completed Projects" card. */
@media (max-width: 700px) {
  header.hero.home-hero-v2 .home-hero-v2__trust {
    margin-top: 0 !important;
    height: auto !important;
    padding: 40px 0 44px !important;
    overflow: visible !important;
  }
}

/* 6) HOME HERO eyebrow — "Commercial Strength · [leaf] · Residential Care" was a
 *    no-wrap single row that got clipped on phones. Stack to 3 lines (phrase /
 *    leaf / phrase) and drop the decorative side rules on mobile. */
@media (max-width: 860px) {
  .home-hero-v2__eyebrow {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 7px !important;
    line-height: 1.3;
  }
  .home-hero-v2__eyebrow .home-hero-v2__eyebrow-rule { display: none !important; }
  .home-hero-v2__eyebrow > span { white-space: nowrap !important; }
  .home-hero-v2__leaf { margin: 1px auto; }
}

/* 7) FOOTER (FSE/parts) — center the Navigation + Services vertical nav lists on
 *    mobile so the block-theme footer matches the classic-PHP footer (which
 *    already centered). Targets the actual flex container (the <ul>). */
@media (max-width: 768px) {
  footer .footer-col,
  footer .footer-brand { text-align: center; }
  /* The nav <ul> renders as display:grid in this theme, so flex `align-items`
     does nothing — `justify-items:center` is what centers grid items. Set both
     so it works whether the block lays out as grid or flex. */
  footer .footer-col .wp-block-navigation,
  footer .footer-col .wp-block-navigation__container,
  footer .wp-block-navigation.footer-links,
  footer .wp-block-navigation.footer-links > ul {
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    text-align: center !important;
  }
  footer .footer-col .wp-block-navigation__container,
  footer .footer-col .wp-block-navigation__container li { list-style: none; text-align: center !important; }
}

/* 8) BLOG single hero — the cover photo over-zooms (crops "high") inside the
 *    tall 62vh band on narrow phones. Shorter band on mobile = gentler crop. */
@media (max-width: 768px) {
  .blog-single-hero,
  .blog-single-hero.blog-single-hero--centered { min-height: 48vh !important; }
  /* Collapse the big empty gap below the hero photo on mobile (was ~212px:
     article 80 + content 56 + first-heading top margin 76). */
  .blog-single-article { padding-top: 26px !important; }
  .blog-single-content { padding-top: 22px !important; }
  .blog-single-content > :first-child { margin-top: 0 !important; }
}
@media (max-width: 480px) {
  .blog-single-hero,
  .blog-single-hero.blog-single-hero--centered { min-height: 42vh !important; }
}

/* 8b) BLOG CARDS (archive + featured + related) — the 16:10 media box used
 *     object-fit:cover with height:100%, which iOS does NOT resolve against an
 *     aspect-ratio parent, so the cream placeholder background showed as a GAP
 *     below the photo. Same robust padding-bottom box + edge-pinned image. */
.blog-card:not(.blog-card--featured) .blog-card__media {
  position: relative;
  aspect-ratio: auto !important;
  height: 0 !important;
  padding-bottom: 62.5% !important;   /* 16:10 */
  overflow: hidden;
}
.blog-card .blog-card__media img {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 900px) {
  .blog-card--featured .blog-card__media {
    position: relative;
    aspect-ratio: auto !important;
    height: 0 !important;
    min-height: 0 !important;
    padding-bottom: 62.5% !important;   /* 16:10 */
    overflow: hidden;
  }
}

/* 9) DOORS — PDS product cards showed a BLACK bar under the photo on mobile.
 *    Root cause: on iOS, `height:100%` does NOT resolve against an
 *    `aspect-ratio`-derived parent height, so landscape photos (ratio > 4:3)
 *    rendered SHORTER than the 4:3 frame, revealing the dark media background
 *    below. Fix: drop aspect-ratio and use the universally-supported
 *    padding-bottom box (75% = 4:3), with the image pinned to all four edges so
 *    it always fills the frame on every browser. */
.pds-card__media {
  position: relative;
  line-height: 0;
  aspect-ratio: auto !important;
  height: 0 !important;
  padding: 0 0 75% 0 !important;   /* 4:3 frame, universal support */
  overflow: hidden;
}
.pds-card__media img {
  position: absolute !important;
  top: 0; right: 0; bottom: 0; left: 0;
  /* !important is REQUIRED: a global `@media(max-width:720px){ img{height:auto
     !important} }` reset (anti-overflow) was overriding height:100% on mobile,
     so landscape photos rendered shorter than the frame and showed the dark
     background below. */
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}

/* 10) SUBFLOOR — "What subfloor sanding & screw is" — the worker cut-out is
 *     absolutely positioned to the right of the text (desktop). On mobile it
 *     overlapped the copy. Stack it BELOW the text, centered. */
@media (max-width: 900px) {
  .inner-content-section--with-worker .inner-content-intro {
    padding-right: 0 !important;
    min-height: 0 !important;
  }
  .inner-content-section--with-worker .reasons-worker {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 260px;
    margin: 18px auto 0 !important;
  }
  .inner-content-section--with-worker .reasons-worker__inner {
    width: 100% !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 11) CABINET — "Materials & Finishes" cards: the fanned brochure layers
 *     overflowed into adjacent text/cards when tapped on mobile. Force a single
 *     column on phones and tame the fan-out so layers stay within the card. */
@media (max-width: 768px) {
  /* The fanned 3-layer "brochure" stack blew up full-width on phones and
     overlapped the button / title / next category. KEEP the fan effect but
     (a) cap the brochure width so the layers stay small, and (b) give the card
     generous breathing room so the fanned corners can't reach neighbours. */
  .materials-section .materials-grid { grid-template-columns: 1fr !important; gap: 64px !important; }
  .material-card { gap: 40px !important; align-items: center; }
  /* Brochure: cap width + a universal padding-bottom box (4:5). The layers are
     <img>, so the global `img{height:auto !important}` mobile reset was forcing
     them to natural (huge) height and they overflowed the card. Pin each layer
     to the box edges with height:100% !important to beat that reset. */
  /* Same look as the DESKTOP original (4:5 portrait brochure + fanned cover
     layers), SHRUNK to a phone size and centered.
     IMPORTANT: use aspect-ratio (resolves against the element's OWN width), NOT
     padding-bottom% — percentage padding resolves against the PARENT card width
     (~full width), so with max-width:210 the box became 210 wide × ~575 tall
     (the elongated/zoomed swatch bug). aspect-ratio fixes that. */
  .material-card__brochure {
    max-width: 210px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 4 / 5 !important;   /* height = own width × 1.25 = correct */
    height: auto !important;
    padding: 0 !important;
    position: relative;
    overflow: visible;                /* let the fan peek out */
  }
  .material-card__layer {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;          /* fills the box; beats img{height:auto!important} */
    object-fit: cover !important;     /* same framing as desktop */
  }
  /* Center the meta text too (image is centered) so the card reads as one
     centered unit instead of centered-image + left-text. */
  .material-card__meta {
    width: 100%;
    text-align: center !important;
    align-items: center !important;
  }
  .material-card__meta .material-card__name,
  .material-card__meta .material-card__short { text-align: center !important; }
  .material-card__cta {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
  /* Slightly tighter fan than desktop so the small capped brochure stays tidy. */
  .material-card__layer--0 { transform: rotate(-6deg) translate(-9px, 7px) !important; }
  .material-card__layer--1 { transform: rotate(5deg) translate(9px, 4px) !important; }
  .material-card:hover .material-card__layer--0,
  .material-card:focus-within .material-card__layer--0 { transform: rotate(-9deg) translate(-13px, 8px) !important; }
  .material-card:hover .material-card__layer--1,
  .material-card:focus-within .material-card__layer--1 { transform: rotate(8deg) translate(13px, 5px) !important; }
}

/* 12) ABOUT — the founders/team photo was cropped to a 420px-min cover frame
 *     (cut faces). Show the FULL photo (natural ratio) and make it click-to-zoom
 *     (lightbox wired in the page template). */
.about-overview-photo { box-shadow: 0 24px 70px rgba(45,45,46,.16); border-radius: 26px; }
.about-overview-photo img {
  min-height: 0 !important;
  height: auto !important;
  object-fit: contain !important;
  cursor: zoom-in;
}

/* Reusable image lightbox (founders photo, etc.) */
.ce-img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 20, 21, 0.9);
  cursor: zoom-out;
}
.ce-img-lightbox[hidden] { display: none; }
.ce-img-lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.ce-img-lightbox__close {
  position: absolute;
  top: 18px; right: 22px;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.ce-img-lightbox__close:hover { background: rgba(255,255,255,.22); }