/* ==========================================================================
   rebuild.css — the ONLY CSS written for this migration.
   --------------------------------------------------------------------------
   Everything else in this folder is Duda's own stylesheet, ported verbatim
   (only url(...) targets were repointed at our local images). The rules below
   exist because Duda ships three separate HTML documents and this build ships
   one, plus one widget it drives from a library we do not include.

   Scoped on html[data-device], which the head script sets from the user-agent
   using the same test Duda's server does — so it agrees with the device
   stylesheet and the device body class rather than guessing from width.
   ========================================================================== */

/* 1. Which header exists.
      The phone document has a hamburger bar and no .dmHeaderContainer at all;
      the desktop/tablet documents have no hamburger chrome. Duda's own CSS
      already makes the drawer `visibility:hidden` off-phone, but the header
      bar still takes 96px of layout, so it needs removing outright. */
html[data-device="mobile"] .dmHeaderContainer { display: none !important; }
html:not([data-device="mobile"]) .mobile-chrome { display: none !important; }

/* 2. Photo galleries.
      Duda's gallery script builds real row/column elements and picks a
      different column count per device (4 across on desktop, 2 on a phone), so
      the DOM differs and no media query can reconcile it. The gallery page
      ships both grids; this picks one. */
html[data-device="mobile"] .rao-gallery-wide { display: none !important; }
html:not([data-device="mobile"]) .rao-gallery-narrow { display: none !important; }

/* 3. Lightbox.
      The live gallery opens PhotoSwipe. We ship a small equivalent instead of
      the library, so it needs its own styling. */
.rao-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 20000;
}
.rao-lightbox.is-open { display: flex; }
.rao-lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
.rao-lightbox button {
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  font-size: 44px;
  line-height: 1;
  padding: 10px 18px;
  cursor: pointer;
}
.rao-lightbox__close { top: 6px; right: 10px; font-size: 34px; }
.rao-lightbox__prev { left: 4px; }
.rao-lightbox__next { right: 4px; }

/* 4. The newer styled-components accordion.
      Duda swaps the description wrapper's generated class to lift its
      max-height; the generated open-state class is not in any stylesheet it
      serves, so the open state is reproduced here.

      The element that actually clips is the description's PARENT — Duda's
      ported CSS gives it `max-height: 0; overflow: hidden` — so the selector
      has to reach `li > div:last-child > div:first-child`, not the item and not
      the description. Targeted structurally rather than by Duda's generated
      class hash, which changes between builds. */
[data-grab="accordion-item-title-wrapper"] { cursor: pointer; }
.rao-acc-open > div:last-child > div:first-child { max-height: 4000px !important; }
.rao-acc-open [data-grab="accordion-item-arrow"] { transform: rotate(180deg); }