/* 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 (p03, her hedge-wall shot, 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/ll-party-crowd.jpg") 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; }
}
/* Touch screens get the same held-still photo the way the reviews band does
   it: a viewport-fixed layer clipped to the section, which iOS honours where
   it ignores background-attachment: fixed. */
@media (hover: none), (pointer: coarse) {
  .svc-hero { background: #000; clip-path: inset(0); }
  .svc-hero::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.68) 100%),
      url("images/ll-party-crowd.jpg") center 30% / cover no-repeat #000;
  }
}
.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; margin-bottom: -20px; }   /* the buttons' extra 20px hangs below the centred block */
/* light type over the dark backdrop; eyebrow tone matches the oc-hero's */
.svc-hero-copy .eyebrow { color: var(--blush); margin-bottom: calc(1.6rem + 10px); }
.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 calc(1.4rem + 10px) calc(1.6em - 16px);
  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); margin: 30px 0 -30px; }
.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(65, 44, 41, 0.25);
  padding: 0.85em 0.2em;
  cursor: pointer;
  color: inherit;
  transition: background-color 0.3s;
}
.svc-ledger button:hover { background: rgba(151, 70, 52, 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(65, 44, 41, 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: calc(clamp(1.8rem, 4vw, 2.8rem) - 18px) 0 18px; 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(236, 228, 214, 0.18);
  background: rgba(236, 228, 214, 0.04);
  overflow: hidden;
  transition: opacity 0.7s ease;
}
.svc-slide[aria-hidden="true"] { opacity: 0.16; }

.svc-slide-media { position: relative; overflow: hidden; height: clamp(360px, 38vw, 480px); }
.svc-slide-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Two add-on slides need their crop anchored; every other slide centres fine.
   p06-print is already a single frame, so the top anchor is just belt-and-braces
   in case the slot is ever pointed back at the full p06 strip (1200x3600). */
.svc-slide-media img[data-bc-pkg-photo="glam-booth-printing-additional-hour"] { object-position: 50% 0%; }
/* The overlay slide EARNS its photo from the artwork in the left corners (the
   filigree frame and the monogram). A centred cover crop cuts both off, which
   would leave the slide illustrating nothing about overlays. Anchor left. */
.svc-slide-media img[data-bc-pkg-photo="image-overlay-social-booth"] { object-position: 0% 50%; }
.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;
  color: rgba(236, 228, 214, 0.5);
  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;
}
/* The price sits beside the add-on name and drops under it only when the two
   cannot share the row (a long name on the narrowest phones overflowed the
   slide). The name sizes from zero, so only an item that truly does not fit
   wraps: wherever a price fitted beside the name before, the row lays out
   exactly as it did. A hidden price leaves this area BLANK: the whole
   .svc-slide-price carries data-bc-if-price (owner, 2026-10-08: never a giant
   "Inquire for pricing" beside the name). */
.svc-slide-top { flex-wrap: wrap; row-gap: 8px; }
/* Custom Event Signage is quoted per job (her own note), so its price reads
   "Starting at $40" and her pricing sentence sits under the description. */
.svc-slide-from {
  font-family: 'Raleway', var(--body);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}
.svc-slide-note {
  margin-top: 0.9rem;
  max-width: 46ch;
  font-family: 'Raleway', var(--body);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(236, 228, 214, 0.6);
}
.svc-slide-name { flex: 1 1 0; }
.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(236, 228, 214, 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(236, 228, 214, 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(236, 228, 214, 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(236, 228, 214, 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;
  color: rgba(236, 228, 214, 0.6);
}

/* ---------- 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; }
  .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: calc(0.4em - 16px); }
  .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; }
}

/* THE ADD-ON SLOT ALWAYS SHIPS, and hides itself until the client actually has
   an add-on, so a price list with none never renders an empty band with a
   heading and no cards. The inert <template data-bc-pkg-item> lives in a
   separate DocumentFragment, so :has() cannot see it, and the section reappears
   on its own the moment src/site_prices.js clones a real card. This kit ships
   demo add-on cards, so the rule is inert here; it bites in a CLIENT BUILD
   whose price list has no add-ons, or whose client later clears them all.
   Never delete #addons from a build to "tidy up" a client with no add-ons
   today: that is the one-way door this rule exists to replace. */
#addons:not(:has([data-bc-pkg])) { display: none; }


/* The accent note was removed from the add-ons footer (owner, 2026-08-27).
   The footer is a flex row at justify-content: space-between, so with the note
   gone its one remaining child (the button) would jump from the right edge to
   the left. Guarded on the note being ABSENT, so a footer that still carries
   one keeps the original two-up layout untouched. */
.svc-addons-foot:not(:has(.svc-addons-note)) { justify-content: flex-end; }