/* Runtime styles for the statically-rendered Claude Design pages.
   Wrapper classes are emitted by scripts/convert.mjs.
   NOTE: this file is a SOURCE — convert.mjs concatenates it with the
   generated style-hover rules into site.css, which is what pages link
   (with a ?v=<content-hash> for cache busting). Edit here, then reconvert. */

/* responsive branches — display:contents keeps the wrapper out of flex/grid layout */
.gr-desk { display: contents; }
.gr-mob { display: none; }
@media (max-width: 980px) {
  .gr-desk { display: none; }
  .gr-mob { display: contents; }
}

/* header dropdown menus (desktop) */
.gr-dropdown { display: none; }
.gr-navitem:hover .gr-dropdown,
.gr-navitem:focus-within .gr-dropdown { display: block; }

/* mobile nav panel + FAQ answers + submitted form state: JS removes [hidden] */
.gr-mobile-nav[hidden], .gr-faq-a[hidden], .gr-form-done[hidden] { display: none; }
.gr-form-live[hidden] { display: none; }

[data-gr="nav-toggle"], [data-gr="faq-toggle"] { cursor: pointer; }

/* Brands We Service: brand grid 2/3 + shop photo 1/3, stacked on mobile */
.gr-brands-split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 980px) {
  .gr-brands-split { grid-template-columns: 1fr; }
  .gr-brands-split img { min-height: 240px; max-height: 320px; }
}