/* Responsive layer for the Seamless Sounds marketing site.
   Page components use inline styles, so overrides here are attribute-scoped
   and !important by necessity. Loaded after styles.css on every page.

   Two gotchas when adding selectors here:
   - React serializes zero as "0px" — write [style*="padding: 0px 32px 96px"].
   - Slashes get spaces: aspectRatio:'4/5' becomes "aspect-ratio: 4 / 5".
     Prefer a data-r hook over matching those values. */

/* ---------- Tablet and below: every multi-column grid becomes one column ---------- */
@media (max-width:1023px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* featured cards stop breaking out of the stack */
  [style*="transform: scale"]{transform:none!important}
  [style*="order: 1"]{order:1!important}
  [style*="order: 2"]{order:2!important}
  /* row groups wrap; column stacks must NOT (a wrapped column with a resolved
     height spills its overflow into a second column and gets clipped) */
  main [style*="display: flex"]:not([style*="flex-direction: column"]){flex-wrap:wrap}
  :root{--text-h1:2.75rem;--text-h2:2.125rem;--text-h3:1.75rem;--text-display:3.25rem;--text-script-accent:2.25rem}
  /* generous desktop section padding tightens up */
  [style*="padding: 96px 32px"]{padding:64px 28px!important}
  [style*="padding: 96px 32px 120px"]{padding:64px 28px 80px!important}
  [style*="padding: 88px 32px"]{padding:60px 28px!important}
  [style*="padding: 160px 32px 80px"]{padding:120px 28px 64px!important}
  [style*="padding: 112px 32px 80px"]{padding:76px 28px 56px!important}
  [style*="padding: 80px 32px 0px"]{padding:56px 28px 0!important}
  [style*="padding: 80px 32px 96px"]{padding:64px 28px 64px!important}
  [style*="padding: 56px 32px 200px"]{padding:40px 28px 96px!important}
  [style*="padding: 0px 32px 96px"]{padding:0 28px 64px!important}
  [style*="padding: 0px 32px 56px"]{padding:0 28px 40px!important}
  [style*="padding: 0px 32px 120px"]{padding:0 28px 80px!important}
  [style*="padding: 56px 56px"]{padding:36px 28px!important}
  [style*="padding: 48px 40px"]{padding:36px 28px!important}
  [style*="padding: 40px 48px"]{padding:32px 28px!important}
  [style*="padding: 36px 40px"]{padding:28px 24px!important}
  [style*="padding: 32px 36px"]{padding:26px 24px!important}
  [style*="padding: 28px 36px"]{padding:24px 22px!important}
  [style*="padding: 28px 32px"]{padding:24px 22px!important}
  [style*="padding: 28px 28px"]{padding:24px 22px!important}
  [style*="padding: 96px 72px"]{padding:64px 28px!important}
  [style*="padding: 96px 0px"]{padding:64px 0!important}
  [style*="padding: 32px 40px 12px"]{padding:26px 22px 12px!important}
  /* Fallback so an unlisted padding literal can never keep desktop gutters.
     Attribute selectors above outrank this, so they still win where they match. */
  section:not([data-r="sax-hero"]):not([data-r="full-bleed"]){padding-left:28px!important;padding-right:28px!important}
  /* tall portrait media gets capped so it can't eat the whole screen */
  [data-r="portrait-media"]{max-height:66vh!important;max-width:520px;margin-left:auto;margin-right:auto}
  /* quote blocks: the image half has no resolved height once stacked */
  [data-r="quote-media"]{height:300px!important;min-height:0!important}
}

/* ---------- Phones ---------- */
@media (max-width:639px){
  :root{--text-h1:2.125rem;--text-h2:1.75rem;--text-h3:1.4375rem;--text-h4:1.3125rem;--text-h5:1.1875rem;--text-body-lg:1.0625rem;--text-body-md:1rem;--text-display:2.5rem;--text-script-accent:1.875rem}
  [style*="padding: 96px 32px"]{padding:52px 20px!important}
  [style*="padding: 96px 32px 120px"]{padding:52px 20px 64px!important}
  [style*="padding: 88px 32px"]{padding:48px 20px!important}
  [style*="padding: 160px 32px 80px"]{padding:96px 20px 52px!important}
  [style*="padding: 112px 32px 80px"]{padding:60px 20px 44px!important}
  [style*="padding: 80px 32px 0px"]{padding:44px 20px 0!important}
  [style*="padding: 80px 32px 96px"]{padding:44px 20px 52px!important}
  [style*="padding: 56px 32px 200px"]{padding:32px 20px 72px!important}
  [style*="padding: 0px 32px 96px"]{padding:0 20px 52px!important}
  [style*="padding: 0px 32px 56px"]{padding:0 20px 36px!important}
  [style*="padding: 0px 32px 120px"]{padding:0 20px 64px!important}
  [style*="padding: 56px 56px"]{padding:28px 20px!important}
  [style*="padding: 48px 40px"]{padding:32px 22px!important}
  [style*="padding: 40px 48px"]{padding:26px 20px!important}
  [style*="padding: 36px 40px"]{padding:24px 20px!important}
  [style*="padding: 32px 36px"]{padding:22px 20px!important}
  [style*="padding: 28px 36px"]{padding:20px 18px!important}
  [style*="padding: 28px 32px"]{padding:20px 18px!important}
  [style*="padding: 28px 28px"]{padding:20px 18px!important}
  [style*="padding: 96px 72px"]{padding:52px 20px!important}
  [style*="padding: 96px 0px"]{padding:52px 0!important}
  [style*="padding: 32px 40px 12px"]{padding:22px 18px 12px!important}
  section:not([data-r="sax-hero"]):not([data-r="full-bleed"]){padding-left:20px!important;padding-right:20px!important}
  /* section gaps shrink with the type */
  [style*="gap: 96px"]{gap:56px!important}
  [style*="gap: 64px"]{gap:32px!important}
  [style*="gap: 56px"]{gap:32px!important}
  [style*="gap: 48px"]{gap:28px!important}
  [style*="gap: 28px"]{gap:20px!important}
  [style*="gap: 24px"]{gap:18px!important}
  /* full-width CTAs read better than side-by-side pills at this width */
  main [style*="display: flex"][style*="gap: 12px"] > button,
  main [style*="display: flex"][style*="gap: 16px"] > button{flex:1 1 100%}
  [data-r="portrait-media"]{max-height:72vh!important}
  [data-r="quote-media"]{height:240px!important}
}

/* ---------- Dance Floor Saxophone split hero ---------- */
@media (max-width:1023px){
  [data-r="sax-hero"]{min-height:0!important}
  [data-r="sax-hero-media"]{min-height:340px!important;max-height:48vh!important}
  /* the left-to-right fade becomes a bottom fade once the hero stacks */
  [data-r="sax-hero-scrim"]{background:linear-gradient(180deg,rgba(20,42,82,0) 50%,rgba(20,42,82,0.55) 100%)!important}
  [data-r="sax-hero-copy"]{padding:40px 28px 56px!important}
}
@media (max-width:639px){
  [data-r="sax-hero-media"]{min-height:280px!important;max-height:44vh!important}
  [data-r="sax-hero-copy"]{padding:32px 20px 44px!important}
}

/* ---------- Header / footer ---------- */
@media (max-width:1023px){
  [data-r="header-inner"]{padding:12px 20px!important}
  [data-r="footer"]{flex-direction:column;gap:18px;text-align:center;padding:36px 20px!important}
}

/* ---------- Home page responsive fixes ---------- */
@media (max-width:1023px){
  /* stacked package order: Elegant DJ + MC, Authentic Live Music, DJ + Musicians */
  #packages [style*="grid-template-columns"] > :nth-child(2){order:3!important}
  /* "A Different Standard": the image half has no resolved height once stacked */
  [data-r="standard-media"]{min-height:380px!important}
  section[style*="min-height: 720px"]{min-height:0!important}
}
@media (max-width:639px){
  [data-r="standard-media"]{min-height:300px!important}
  /* Most Popular tag moves onto the image so it can't collide with the CTA */
  [data-r="popular-badge"]{top:12px!important;right:12px!important;bottom:auto!important}
}

/* ---------- Packages page ---------- */
@media (max-width:1023px){
  /* stacked order: DJ Services, Live Musicians, DJ + Musicians */
  [data-r="choose-row"] > :nth-child(2){order:3!important}
}

/* ---------- Enhancements page ---------- */
@media (max-width:1023px){
  /* photo leads the section once stacked */
  [data-r="enh-media-first"],[data-r="enh-ceremony-media"]{order:-1!important}
  /* the ceremony photo pair stays side by side, at a smaller size */
  [data-r="enh-ceremony-media"]{grid-template-columns:1fr 1fr!important;max-width:400px;margin:0 auto 8px}
  [data-r="enh-ceremony-media"] [data-r="portrait-media"]{max-height:none!important;max-width:none;margin-left:0;margin-right:0}
}
@media (max-width:639px){
  [data-r="enh-ceremony-media"]{max-width:320px}
}

@media (max-width:1023px){
  /* Client Resources */
  [data-r="cr-grid"]{grid-template-columns:1fr!important}
  [data-r="cr-hero"]{min-height:56vh!important;padding:72px 24px!important}
  /* Inspiration Library: cover photo leads each section */
  [data-r="insp-cover"]{order:-1!important;min-height:300px!important}
  [data-r="insp-pills"]{flex-wrap:wrap!important}
  [data-r="insp-hero-media"]{height:32vh!important;min-height:240px!important}
  [data-r="insp-split"]{grid-template-columns:1fr!important;gap:24px!important}
  [data-r="insp-split-media"] iframe{height:520px!important;min-height:520px!important}
}
/* ---------- Live Ceremony Musicians page ---------- */
/* FAQ rows: the chevron must never wrap under the question */
[data-r="faq-q"]{flex-wrap:nowrap!important}
@media (max-width:1023px){
  [data-r="live-hero"]{min-height:44vh!important}
  /* ensemble carousel: bigger image, switcher stays a single row */
  [data-r="ensemble-media"]{height:360px!important}
  [data-r="ensemble-switcher"]{flex-wrap:nowrap!important;gap:16px!important}
}
/* Tablet: "More than just the Music" cards get narrower and alternate sides */
@media (min-width:640px) and (max-width:1023px){
  [data-r="perks-grid"]{gap:24px!important}
  [data-r="perks-grid"] > *{max-width:64%}
  [data-r="perks-grid"] > :nth-child(2){margin-left:auto}
  [data-r="perks-grid"] [data-r="perk-media"]{height:300px!important;min-height:300px!important}
  /* ensemble card narrows so the image can be taller */
  [data-r="ensemble-carousel"]{max-width:520px!important;margin-left:auto!important;margin-right:auto!important}
  [data-r="ensemble-media"]{height:440px!important}
}
@media (max-width:639px){
  [data-r="live-hero"]{min-height:52vh!important}
  [data-r="ensemble-media"]{height:280px!important}
  [data-r="ensemble-switcher"]{gap:10px!important}
  [data-r="ensemble-switcher"] > button{flex:0 1 auto;min-width:0}
}

/* ---------- Hero watermark ---------- */
@media (min-width:640px) and (max-width:1023px){
  [data-r="hero-watermark"]{width:600px!important}
}
@media (max-width:639px){
  [data-r="hero-watermark"]{width:440px!important}
}
/* ---------- Swipe carousels (mobile + tablet package cards) ---------- */
@media (max-width:1023px){
  /* the collage keeps its two columns when the section stacks */
  [data-r="sax-collage"]{grid-template-columns:1fr 1fr!important;max-width:520px;margin:0 auto}
}
[data-carousel="on"]::-webkit-scrollbar{display:none}
@media (max-width:1023px){
  [data-carousel="on"]{grid-template-columns:none!important}
}

/* ---------- Wedding DJ: Our DJs ---------- */
@media (max-width:1023px){
  [data-r="dj-team"]{padding:64px 24px!important}
  [data-r="dj-team-inner"]{gap:28px!important}
  [data-r="dj-team-copy"]{grid-template-columns:1fr!important;gap:24px!important}
  [data-r="dj-team-media"]{max-width:none!important;gap:12px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important}
  /* "So Easy to Work With": photo leads the section */
  [data-r="easy-wrap"]{grid-template-columns:1fr!important;grid-template-areas:"media" "head" "text"!important;row-gap:32px!important}
  [data-r="easy-media"]{max-width:520px;margin:0 auto}
}