/*
 * Baker Aluminum, Elementor responsive fix (STAGING)
 *
 * Problem: on small laptop widths (roughly 1000px to 1366px), the multi-column
 * text sections on the service and about pages keep their desktop two-column
 * widths because Elementor containers do not restack until mobile. The columns
 * become tall, thin ribbons. This stylesheet stacks those specific columns to
 * full width at 1366px and below so the text reads comfortably. Full desktop
 * (1367px and up) is left exactly as designed.
 *
 * Scope: enqueued only on posts 850, 979, 1028, 1057, 293 (see functions.php),
 * and every rule is keyed to a specific Elementor element ID inside that page
 * wrapper. Photo and before/after galleries are intentionally left untouched.
 * The hand-coded PHP homepage and estimate pages are never affected.
 *
 * Layout only. No content, copy, or image changes.
 *
 * Each block does two things at the breakpoint:
 *   1. Force the parent row container to stack vertically. We set both the
 *      Elementor --flex-direction custom property (needed for boxed containers,
 *      whose flex lives on the inner .e-con-inner wrapper) and the direct
 *      flex-direction property (for full-width containers).
 *   2. Widen each column to 100%. Child element IDs are globally unique, so a
 *      descendant selector matches whether the parent is a full or boxed
 *      container.
 */

@media (max-width: 1366px) {

  /* ---------- Page 850: aluminum-roof-systems ---------- */

  /* "Insulated Composite Panel Roof Systems": two-column text block (FULL) */
  .elementor-850 .elementor-element.elementor-element-bfb0edf {
    --flex-direction: column !important;
    flex-direction: column !important;
  }
  .elementor-850 .elementor-element.elementor-element-bfb0edf > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-850 .elementor-element.elementor-element-f3276df,
  .elementor-850 .elementor-element.elementor-element-4ce52c7 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* "Pro Pan Cover System": text-plus-image block (BOXED) */
  .elementor-850 .elementor-element.elementor-element-8dc9ff2 {
    --flex-direction: column !important;
    flex-direction: column !important;
  }
  .elementor-850 .elementor-element.elementor-element-8dc9ff2 > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-850 .elementor-element.elementor-element-bf49d11,
  .elementor-850 .elementor-element.elementor-element-5b4113e {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- Page 1028: soft-vinyl-enclosures ---------- */

  /* "Key Features, Benefits, and Considerations": two-column text block (FULL) */
  .elementor-1028 .elementor-element.elementor-element-30ae454a {
    --flex-direction: column !important;
    flex-direction: column !important;
  }
  .elementor-1028 .elementor-element.elementor-element-30ae454a > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-1028 .elementor-element.elementor-element-e8b7d01,
  .elementor-1028 .elementor-element.elementor-element-a938b9a {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- Page 1057: acrylic-enclosures ---------- */

  /* "Acrylic Pane Sliders": two-column text block (FULL) */
  .elementor-1057 .elementor-element.elementor-element-31b148ff {
    --flex-direction: column !important;
    flex-direction: column !important;
  }
  .elementor-1057 .elementor-element.elementor-element-31b148ff > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-1057 .elementor-element.elementor-element-63312f4f,
  .elementor-1057 .elementor-element.elementor-element-bda54f9 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- Page 293: about ---------- */

  /* "Our Mission": two-column text block (BOXED) */
  .elementor-293 .elementor-element.elementor-element-37ff6a2 {
    --flex-direction: column !important;
    flex-direction: column !important;
  }
  .elementor-293 .elementor-element.elementor-element-37ff6a2 > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-293 .elementor-element.elementor-element-30a8e57,
  .elementor-293 .elementor-element.elementor-element-8fd5234 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
 * Round 2: "View Gallery" lightbox buttons (service pages)
 * Kerry wants Mullet's-style galleries: photos behind a button
 * (Elementor native lightbox), not long inline photo walls.
 * The visible .ba-view-gallery link opens a slideshow; sibling
 * .ba-lb-hidden links share the slideshow group but stay hidden.
 * Global (all viewports); scoped by class, service pages only.
 * ============================================================ */
.ba-gallery-cta { margin-top: 18px; }
.ba-lb-hidden { display: none !important; }
a.ba-view-gallery,
a.ba-view-gallery:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: #D8A827;
  color: #1a1a1a !important;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.45);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.ba-view-gallery::after {
  content: "";
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>") center/contain no-repeat;
}
a.ba-view-gallery:hover {
  background: #977702;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,0.5);
}

/* ============================================================
 * Round 2: custom gallery lightbox carousel (baker-gallery.js)
 * Big left/right arrows + dot indicators for the View Gallery
 * galleries on the roof page (and any [data-ba-gallery]).
 * ============================================================ */
.ba-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(10,10,12,0.94);
  display: flex; align-items: center; justify-content: center; }
.ba-lb[hidden] { display: none; }
.ba-lb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 88vw; max-height: 84vh; }
.ba-lb__img { max-width: 88vw; max-height: 74vh; width: auto; height: auto; object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); background: #111; }
.ba-lb__cap { color: #fff; font-family: "Inter","Helvetica Neue",Arial,sans-serif; font-size: 15px;
  line-height: 1.5; text-align: center; max-width: 74vw; }
.ba-lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 64px; height: 64px;
  border: none; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff;
  font-size: 42px; line-height: 1; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background .18s ease, transform .18s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ba-lb__nav:hover { background: #D8A827; color: #1a1a1a; transform: translateY(-50%) scale(1.06); }
.ba-lb__prev { left: 24px; } .ba-lb__next { right: 24px; }
.ba-lb__close { position: fixed; top: 22px; right: 26px; width: 48px; height: 48px; border: none;
  border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; transition: background .18s ease; }
.ba-lb__close:hover { background: #D8A827; color: #1a1a1a; }
.ba-lb__dots { position: fixed; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center;
  gap: 11px; flex-wrap: wrap; padding: 0 20px; }
.ba-lb__dot { width: 12px; height: 12px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.38); transition: background .18s ease, transform .18s ease; }
.ba-lb__dot[aria-selected="true"] { background: #D8A827; transform: scale(1.25); }
@media (max-width: 600px) {
  .ba-lb__nav { width: 48px; height: 48px; font-size: 30px; }
  .ba-lb__prev { left: 8px; } .ba-lb__next { right: 8px; }
  .ba-lb__img { max-height: 66vh; }
}