/* SPA fidelity overrides for the yuryandpeter.com clone.
 *
 * The original site uses AOS (Animate-On-Scroll): every [data-aos] element starts
 * at opacity:0 and is revealed by JS as it scrolls into view. In this Vue SPA the
 * page markup mounts after the plugin scripts run, so that scroll-reveal can miss
 * elements and leave content invisible. We reveal AOS content unconditionally so
 * the final, fully-rendered layout always matches the original (no flash of empty
 * page). Scroll-in animations are intentionally traded away for reliable content. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

/* Gallery: masonry that auto-balances column heights so no white gaps remain
 * after window photos were removed (see rebuild_gallery_masonry in build_clone.py).
 * CSS multi-column keeps the varied-height masonry look and fills the columns. */
/* Center the gallery section like the rest of the pages (Blocksy content width).
 * The section is a flex item inside a Stackable row, so auto side-margins center it. */
.dgallery-section {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
  padding-top: 22px;   /* + the heading's own ~8px = 30px header-to-title gap, like the other pages */
  box-sizing: border-box;
}
.dmasonry {
  column-count: 4;
  column-gap: 16px;
  margin: 28px 0 0;
  padding: 0 20px;
  box-sizing: border-box;
}
.dmasonry-item {
  break-inside: avoid;
  margin: 0 0 16px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.dmasonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
.dmasonry-item:hover img { transform: scale(1.04); }

/* Off-canvas mobile menu: reveal the panel when our JS toggles `.active`
 * (Blocksy's own rule is being overridden in this SPA build). */
.ct-panel.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* White background for the mobile menu drawer. */
#offcanvas.ct-panel { background-color: #ffffff !important; }
/* Lock background scroll while the mobile off-canvas menu is open. */
:root.ct-panel-open, :root.ct-panel-open body { overflow: hidden; }

/* Services page: shrink the big gap between the carousel and the gray services
 * box below it, on mobile only. */
@media (max-width: 782px) {
  .stk-76e6ade { margin-bottom: 40px !important; }
  /* FAQs box: reduce the 50px side padding on mobile. */
  .stk-d9dfd74 { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Footer bottom row: stack the copyright above the Sitemap on mobile instead of
 * squeezing them into narrow side-by-side columns. */
@media (max-width: 782px) {
  footer [data-row="bottom"] > .ct-container {
    grid-template-columns: 1fr !important;
    justify-items: center;
    row-gap: 10px;
    text-align: center;
  }
}

/* Contact email/phone: clickable mailto/tel that keep the heading style. */
.contact-email-link,
.contact-phone-link { color: inherit; text-decoration: none; }

/* Contact list: drop the divider lines and keep a comfortable gap between items. */
.stk-890c4f4 .wp-block-stackable-divider { display: none !important; }
.stk-890c4f4 .wp-block-stackable-icon-label { margin-bottom: 40px !important; }
.stk-890c4f4 .wp-block-stackable-icon-label:last-of-type { margin-bottom: 0 !important; }

/* Mobile: tighter spacing between the contact items. */
@media (max-width: 782px) {
  .stk-890c4f4 .wp-block-stackable-icon-label { margin-bottom: 16px !important; }
}

/* Desktop: center the whole contact block on the page, and center each item's
 * icon+text within it. */
@media (min-width: 783px) {
  .stk-890c4f4 {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 1 auto !important;
  }
  .stk-890c4f4 .wp-block-stackable-icon-label .stk-row { justify-content: center !important; }
  /* Stop the heading from stretching to fill the row so the icon+text group can
   * actually be centered (otherwise the block-level heading eats all free space
   * and the text stays left-aligned against the icon). */
  .stk-890c4f4 .wp-block-stackable-icon-label .wp-block-stackable-heading {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: 100% !important;
  }
}
/* Contact info on mobile: one uniform size for phone/email/location, the email
 * kept on a single line, and slightly smaller icons. */
@media (max-width: 782px) {
  .stk-890c4f4 .stk-block-heading__text { font-size: clamp(14px, 4.6vw, 18px) !important; }
  #yurydoorsrepairs-gmail-com .stk-block-heading__text { white-space: nowrap; }
  /* only the real icon (svg:last-child); the 0x0 gradient-def svg (first-child)
   * is left untouched. High specificity to beat Stackable's per-block 25px rule. */
  .stk-890c4f4 .stk-block-icon .stk--svg-wrapper .stk--inner-svg svg:last-child {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Keep the (longer) brand name on a single line in the mobile header. */
.site-title a { white-space: nowrap; }
@media (max-width: 782px) {
  .site-title a { font-size: clamp(13px, 4.5vw, 22px); }
}

/* Home hero photo: fill its box without distortion, with rounded corners. */
img[src*="hero-sliding-door"] {
  object-fit: cover !important;
  border-radius: 18px;
}
@media (max-width: 900px) { .dmasonry { column-count: 3; } }
@media (max-width: 600px) { .dmasonry { column-count: 2; } }
@media (max-width: 400px) { .dmasonry { column-count: 1; } }

/* Services (mobile-only block): hide the "Glass replacement" photo (Service-3)
 * that sat between the REPAIR and INSTALL cards. This column only exists in the
 * mobile/tablet services block, so hiding it here affects mobile only. */
.stk-766a7b1 { display: none !important; }