/* Responsive layer for the live site. Inline styles carry the desktop design;
   container queries on [data-site-frame] reflow it for tablets and phones.
   Shared components (header, footer, cards, chat) are marked data-keep and handle their own layout. */
[data-site] img, [data-site] iframe, [data-site] video { max-width: 100%; }
[data-site-frame] { container: site / inline-size; }

@container site (max-width: 1180px) {
  [data-site] :is([style*="repeat(4"], [style*="repeat(5"], [style*="repeat(6"]):not([data-keep], [data-keep] *) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@container site (max-width: 1023px) {
  [data-site] [style*="grid-template-columns"]:not([data-keep], [data-keep] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-site] :is([style*="fr) minmax"], [style*="grid-template-columns: 2"], [style*="grid-template-columns: 3"]):not([style*="repeat("]):not([data-keep], [data-keep] *) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-site] h1:not([data-keep] *) { font-size: clamp(40px, 7vw, 72px) !important; }
}

@container site (max-width: 819px) {
  [data-site] [style*="grid-template-columns"]:not([data-keep], [data-keep] *) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-site] [data-m2]:not([data-keep] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-site] h1:not([data-keep] *) { font-size: clamp(36px, 10.5vw, 52px) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; }
  [data-site] h2:not([data-keep] *) { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.08 !important; }
  [data-site] h3:not([data-keep] *) { font-size: 20px !important; }
  [data-site] [data-big]:not([data-keep] *) { font-size: 64px !important; line-height: .95 !important; }
  [data-site] :is([style*="font-size: 5"], [style*="font-size: 6"], [style*="font-size: 7"]):not([style*="font-size: 5px"], [style*="font-size: 6px"], [style*="font-size: 7px"], [style*="font-size: 5."], [style*="font-size: 6."], [style*="font-size: 7."]):not([data-big]):not([data-keep], [data-keep] *) { font-size: 40px !important; line-height: 1 !important; }
  [data-site] [style*="font-size: 4"]:not([style*="font-size: 4px"], [style*="font-size: 4."]):not([data-keep], [data-keep] *) { font-size: 32px !important; line-height: 1.05 !important; }
  [data-site] :is([style*="padding: 3"], [style*="padding: 4"], [style*="padding: 5"], [style*="padding: 6"], [style*="padding: 7"], [style*="padding: 8"]):not([style*="padding: 3px"], [style*="padding: 4px"], [style*="padding: 5px"], [style*="padding: 6px"], [style*="padding: 7px"], [style*="padding: 8px"]):not([data-keep], [data-keep] *) { padding: 22px 16px !important; }
  [data-site] [style*="padding: 20px"]:not([data-keep], [data-keep] *) { padding: 12px !important; }
  [data-site] [style*="margin: 0 20px"]:not([data-keep], [data-keep] *) { margin-left: 10px !important; margin-right: 10px !important; }
  [data-site] :is([style*="gap: 4"], [style*="gap: 5"], [style*="gap: 6"]):not([style*="gap: 4px"], [style*="gap: 5px"], [style*="gap: 6px"]):not([data-keep], [data-keep] *) { gap: 24px !important; }
  [data-site] [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="border-radius: 999px"], [style*="border-radius: var(--r-pill)"], [style*="999px"] *, [style*="var(--r-pill)"] *):not([data-nowrap], [data-carousel], [data-marquee-row]):not([data-keep], [data-keep] *) { flex-wrap: wrap; }
  [data-site] [data-tall]:not([data-keep] *) { height: auto !important; min-height: 0 !important; }
  [data-site] [data-tall][style*="position: relative"]:not([data-keep] *) { height: 340px !important; }
  [data-site] [style*="position: sticky"]:not([data-keep], [data-keep] *) { position: static !important; }
  [data-site] :is([style*="border-radius: 999px"], [style*="border-radius: var(--r-pill)"]):not([data-keep], [data-keep] *) { white-space: nowrap; max-width: 100%; }
  [data-site] [data-desk-only], [data-site] [data-mfilters][data-open="0"] { display: none !important; }
  [data-site] [data-carousel] { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px !important; grid-template-columns: none !important; scroll-behavior: smooth; }
  [data-site] [data-carousel]::-webkit-scrollbar { display: none; }
  [data-site] [data-carousel] > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
}
@container site (max-width: 1023px) {
  [data-site] [data-vd-main] { display: flex !important; flex-direction: column; gap: 12px !important; }
  [data-site] [data-vd-left] { display: contents !important; }
  [data-site] [data-vd-left] > * { order: 3; width: 100%; }
  [data-site] [data-vd-left] > [data-vd-gal] { order: 1; }
  [data-site] [data-vd-left] > [data-vd-thumbs] { order: 1; }
  [data-site] [data-vd-aside] { order: 2; width: 100%; }
}
@container site (max-width: 819px) {
  [data-site] [data-vd-thumbs] { display: flex !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; margin-top: -4px; }
  [data-site] [data-vd-thumbs]::-webkit-scrollbar { display: none; }
  [data-site] [data-vd-thumbs] > button { flex: 0 0 calc((100% - 16px) / 3) !important; aspect-ratio: 4/3; border-radius: 14px !important; }
}
@container site (min-width: 820px) {
  [data-site] [data-mob-only] { display: none !important; }
}
@container site (max-width: 819px) {
  [data-site] [data-qs-go] { min-height: 56px; padding: 0 22px !important; font-size: 16px !important; justify-content: center; margin-top: 6px; border-radius: 18px !important; }
}
@keyframes asMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


@container site (max-width: 819px) {
  [data-site] [data-budget-pills] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; gap: 8px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
  [data-site] [data-budget-pills] > a { display: flex !important; justify-content: space-between !important; align-items: center !important; min-height: 44px !important; padding: 10px 16px !important; background: var(--color-surface) !important; border: 1px solid var(--color-divider) !important; border-radius: var(--r-pill) !important; }
  [data-site] [data-budget-pills] { margin-top: 4px; }
}

[data-marquee-row] { flex-wrap: nowrap !important; width: max-content !important; }
[data-marquee-row] > * { flex: none; white-space: nowrap; }

@container site (max-width: 819px) {
  [data-site] [data-seg][data-seg][data-seg][style] { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; gap: 4px !important; border-radius: 24px !important; }
  [data-site] [data-seg][data-seg][data-seg][style] > * { min-height: 44px; }
}

/* Footer: 4 columns on desktop (never a wrapped 5th), 2 on tablets, 1 on phones. */
@container site (max-width: 1023px) { [data-foot-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@container site (max-width: 599px) { [data-foot-grid] { grid-template-columns: minmax(0, 1fr) !important; } }