/* packages.html page components. Linked ONLY on packages.html, after
   packages.css + pages.css, so no other page can be affected. Same design
   language as styles.css: serif display + script accents, Work Sans labels,
   cream/brown/ink/rose, 1px keylines and frames. All motion sits behind
   prefers-reduced-motion. */

/* ---------- Hero: editorial split over a fixed photo backdrop ----------
   Mirrored against single-service's copy-left split: here the MEDIA leads — a
   framed photo — and the copy rides right, in light type over a darkened
   full-bleed photo (the ballroom setup, unused elsewhere on this page).
   The attachment is fixed only for hover/fine-pointer devices: iOS Safari
   sizes a fixed background against the whole scroll box (a blown-up blurry
   crop), so touch keeps the default scroll attachment. */

.svc-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.68) 100%),
    url("images/mey/pkg-hero-bg.webp") center 30% / cover no-repeat #000;
  /* window height, same idiom as the base .hero: MIN-height (a fixed height
     has no give and clips when copy runs long) + flex centring, svh so iOS
     toolbars don't overshoot */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem);
}
@media (hover: hover) and (pointer: fine) {
  .svc-hero { background-attachment: fixed; }
}
.svc-hero-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  grid-template-areas: 'media copy';
  gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.svc-hero-copy { grid-area: copy; }
/* light type over the dark backdrop. The eyebrow tone started at the oc-hero's
   #cbb6ae, which measured 3.57:1 on the KIT's own backdrop photo and 4.04:1 on
   this build's: under 4.5:1 for 12.8px text either way, i.e. an inherited miss,
   not one this build introduced. Lightened along the same warm rose hue to the
   first value that clears 4.5:1 at 1440 AND 390 with margin (measured 5.4 / 5.1
   against the 95th-percentile backdrop pixel), so the photo keeps its exposure
   and only the type moves. */
.svc-hero-copy .eyebrow { color: #e3d5cf; margin-bottom: 1.6rem; }
.svc-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.02;
  color: #fff;
}
.svc-hero-script {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1;
  margin: 0 0 1.4rem 1.6em;
  color: #fff;
}
.svc-hero-line {
  font-family: 'Raleway', var(--body);
  line-height: 1.8;
  max-width: 46ch;
  margin-bottom: 2.2rem;
  color: rgba(255, 255, 255, 0.92);
}
.svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
}
.svc-hero-media { grid-area: media; width: min(100%, 460px); }
/* the brown keyline vanished on the dark backdrop; the frame goes light */
.svc-frame { border: 1px solid rgba(255, 255, 255, 0.75); padding: clamp(0.8rem, 1.6vw, 1.1rem); }
.svc-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* The ledger: every package as one glance, dotted leaders in the a la carte
   language, on a card overlapping the framed photo. Rows are buttons;
   services.js prefills the inquiry form with the picked package. The row
   count is data-driven (data-bc-pkg-list), so never hardcode it here or in
   the copy: this client ships five, the kit ships three. */
.svc-ledger {
  position: relative;
  background: #fff;
  border: 1px solid var(--brown);
  padding: 1.3rem 1.5rem 1.4rem;
  margin: -3.2rem calc(-1 * clamp(1rem, 3vw, 2.2rem)) 0 clamp(1.8rem, 4vw, 3rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.svc-ledger-label {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.4rem;
}
.svc-ledger button {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(58, 53, 49, 0.25);
  padding: 0.85em 0.2em;
  cursor: pointer;
  color: inherit;
  transition: background-color 0.3s;
}
.svc-ledger button:hover { background: rgba(160, 133, 126, 0.08); }
.svc-ledger-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.svc-ledger button:hover .svc-ledger-name { color: var(--rose); }
.svc-dots { flex: 1; border-bottom: 1px dotted rgba(58, 53, 49, 0.5); }
.svc-ledger-price {
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  white-space: nowrap;
}
.svc-ledger-note {
  font-family: 'Raleway', var(--body);
  font-size: 0.875rem;
  line-height: 1.7;
  opacity: 0.85;
  margin-top: 1.1rem;
}
.svc-ledger-note a { color: inherit; }

/* Staggered load rise, same choreography as the shared hero-in keyframe */
@media (prefers-reduced-motion: no-preference) {
  .svc-hero-copy > *,
  .svc-frame,
  .svc-ledger { animation: hero-in 1s ease both; }
  .svc-hero-copy > :nth-child(2) { animation-delay: 0.1s; }
  .svc-hero-copy > :nth-child(3) { animation-delay: 0.2s; }
  .svc-hero-copy > :nth-child(4) { animation-delay: 0.3s; }
  .svc-hero-copy > :nth-child(5) { animation-delay: 0.4s; }
  .svc-frame { animation-delay: 0.25s; }
  .svc-ledger { animation-delay: 0.55s; }
}

/* ---------- Foundation band: asymmetric split (head + photo | rows) ---------- */

.svc-found-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.svc-found-grid .pg-head { margin-bottom: 0; }
.svc-found-photo { margin-top: clamp(1.8rem, 4vw, 2.8rem); width: min(100%, 380px); }
.svc-found-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc-found-grid .pg-rows { max-width: none; margin: 0; }
.svc-found-grid .pg-row:first-child { padding-top: 0.4rem; }

/* ---------- Add-ons on brown: the page's dark, starlit moment ----------
   A click-through carousel, one slide per add-on. Same shared engine as the
   other kits (viewport / track / uniform slide grid, round arrows, dots, dreamy
   count-agnostic); rendered here in the site's own palette. The
   local --glow token is the one warm champagne accent tuned for the brown band. */

.svc-addons { --glow: #d8c3b8; }
.svc-addons .pg-head { text-align: left; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.svc-addons .pg-head p { margin-left: 0; max-width: 56ch; }

.svc-carousel-viewport { overflow: hidden; }
.svc-carousel-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform;
}
.svc-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border: 1px solid rgba(245, 243, 240, 0.18);
  background: rgba(245, 243, 240, 0.04);
  overflow: hidden;
  transition: opacity 0.7s ease;
}
.svc-slide[aria-hidden="true"] { opacity: 0.16; }

/* min-height, not height: the slide is a two-column grid whose height is driven
   by the TEXT column, and her add-on descriptions are 507 and 532 chars against
   the demo's one-liner. With a fixed 480px the media column could not grow, so
   the photo ended 129px short of the slide and left dead space under it. Grid
   stretch now fills the row; the clamp stays as the floor. The mobile block
   resets min-height because that layout stacks to a fixed 260px banner. */
.svc-slide-media { position: relative; overflow: hidden; min-height: clamp(360px, 38vw, 480px); }
.svc-slide-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The kit anchored two slide crops with per-slug selectors. Those slugs are the
   demo's and do not exist in this build, and both of her add-on photos are
   square crops that centre correctly, so the rules are removed rather than left
   dead. Add a per-slug object-position here only if one of her slides crops
   badly. */
.svc-slide-tag {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  background: var(--cream);
  color: var(--brown);
  padding: 0.5em 1.1em;
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.svc-slide-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.9rem, 4vw, 3.6rem);
}
.svc-slide-index {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* 0.5 measured 3.36:1 on the band (11px label text, needs 4.5). The kit ships
     the same value, so this is inherited, not introduced here. 0.65 is the first
     alpha that clears it when measured against the rendered composite (4.63)
     and it stays below the blurb's 0.74, so the hierarchy the design wanted
     survives. */
  color: rgba(245, 243, 240, 0.68);
  margin-bottom: 1.3rem;
}
.svc-slide-index b { color: var(--glow); font-weight: 400; }
.svc-slide-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; }
.svc-slide-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
  /* These headings carry the client's OWN add-on names, verbatim, and the
     platform rewrites them from her price list whenever she saves it. So the
     rule has to survive names she chooses, not the short ones a designer would
     pick: "Image Overlay (Social Booth)" otherwise breaks after "(Social" and
     runs its first line into the price. Balancing keeps the parenthetical whole
     and kills the one-word orphan on the longest name. Ignored by browsers that
     do not support it, which just leaves today's greedy wrap. */
  text-wrap: balance;
}
.svc-slide-price {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--glow);
  white-space: nowrap;
}
.svc-slide-blurb {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-family: 'Raleway', var(--body);
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(245, 243, 240, 0.74);
}

.svc-addon-add {
  align-self: flex-start;
  margin-top: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color 0.3s;
}
.svc-addon-add:hover { color: var(--glow); }
.svc-addon-add:focus-visible { outline: 2px solid var(--glow); outline-offset: 5px; }
.svc-addon-add-i {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 243, 240, 0.4);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1), background 0.3s, color 0.3s, border-color 0.3s;
}
.svc-addon-add:hover .svc-addon-add-i { border-color: var(--glow); }
.svc-slide.is-added .svc-addon-add-i {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--brown);
  transform: rotate(45deg);
}

/* nav: arrows flanking the dots (JS hides the row when there is one slide) */
.svc-carousel-nav {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.svc-carousel-arrow {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  border: 1px solid rgba(245, 243, 240, 0.35);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.svc-carousel-arrow:hover { background: var(--glow); color: var(--brown); border-color: var(--glow); }
.svc-carousel-arrow:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.svc-carousel-dots { display: flex; align-items: center; gap: 0.75rem; }
.svc-carousel-dots button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(245, 243, 240, 0.3);
  transition: background 0.3s, transform 0.3s;
}
.svc-carousel-dots button.is-live { background: var(--glow); transform: scale(1.35); }

.svc-addons-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.svc-addons-note {
  max-width: 46ch;
  font-family: 'Raleway', var(--body);
  font-size: 0.8125rem;
  line-height: 1.7;
  /* 0.6 measured 4.38:1, just under the 4.5 this 13px text needs; same value in
     the kit, so inherited. 0.65 clears it at 4.53. */
  color: rgba(245, 243, 240, 0.65);
}

/* ---------- FAQ garnish: answers ease open (this page only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: svc-faq-in 0.45s ease; }
}
@keyframes svc-faq-in {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Small screens (kit breakpoint) ---------- */

@media (max-width: 900px) {
  .svc-slide { grid-template-columns: 1fr; }
  .svc-slide-media { height: 260px; min-height: 0; }
  .svc-addons-foot { flex-direction: column; align-items: flex-start; }
  .svc-addons-foot .btn { width: 100%; text-align: center; }
}

@media (max-width: 800px) {
  .svc-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'media';
  }
  .svc-hero-copy h1 { font-size: 9.375vw; }
  .svc-hero-script { font-size: 9.2vw; margin-left: 0.4em; }
  .svc-hero-media { justify-self: center; width: min(100%, 340px); }
  .svc-ledger { margin: -2.2rem 0 0 0.8rem; }
  .svc-found-grid { grid-template-columns: 1fr; }
  .svc-found-photo { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-carousel-track { transition: none; }
}