/* 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 (k01, the white drapery-and-florals frame, used at -lg and
   nowhere else in this page's body). The kit pointed this at images/package-2.webp,
   which does not exist in this build; every photo here is licensed stock from
   images/scc + images/stock and none of it depicts ShamCam's own work.
   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. */

/* Scrim stops raised from the kit's .58/.68. They are calibrated to the kit's
   own dark demo photo; k01 is a white-drapery, white-gown frame and is far
   brighter, which put the .eyebrow (#cbb6ae, small text) at 4.06:1 desktop and
   3.73:1 mobile against a 4.5:1 floor. Measured sweep against the brightest
   backdrop pixel under each text run: .58 fails, .62 fails, .64 passes by x1.00
   on mobile (no headroom), .66 is the lowest value that clears every slot at
   both widths with margin (x1.07). Only the existing gradient was tuned, so the
   photo stays as visible as legibility allows. Re-measure if the photo changes. */
.svc-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.76) 100%),
    url("images/scc/k01-lg.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; eyebrow tone matches the oc-hero's */
.svc-hero-copy .eyebrow { color: #cbb6ae; 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.
   UNUSED IN THIS BUILD, and unused in the design-04 kit it was cut from:
   templates/design-04/packages.html carries no .svc-ledger markup, so every
   rule from here down to .svc-ledger-note is dead, as is the animation delay
   below. Left in place rather than deleted because adding the markup is a
   design decision, not a build decision, and the build-from-skeleton contract
   forbids inventing an element the skeleton does not have. If the ledger is
   ever wanted it belongs in the KIT first. Reported 2026-08-04. */
.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; }

.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; }
/* Crop anchors, one per slide that needs one. The kit's two rules named its own
   demo slugs, which do not exist in this build, so they were replaced rather
   than left dead.
   Both of these are tall 2:3 sources dropped into a ~1:1 slide window: a
   centred cover crop lands below the subject and shows only torsos. */
.svc-slide-media img[data-bc-pkg-photo="the-glitter-gallery"] { object-position: 50% 32%; }
.svc-slide-media img[data-bc-pkg-photo="the-memory-makers"] { object-position: 50% 34%; }
/* This slide earns its photo from the printed event sign in the top of the
   frame ("custom event signage" is one of the add-on's own inclusions). A
   centred crop of a 2:3 source cuts the sign off entirely. Anchor high. */
.svc-slide-media img[data-bc-pkg-photo="custom-styling-details"] { object-position: 50% 12%; }
.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(245, 243, 240, 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;
}
/* The kit sized this slot for "$150" at display scale, nowrap. On THIS build
   every add-on is unpriced (client_packages.amount_cents NULL), so the
   reconciler writes its own UNPRICED_LABEL, "Inquire for pricing", into the
   slot: nineteen characters at 2.5rem with nowrap overran the slide and drove
   the whole page into horizontal scroll. Sized to the same label treatment
   .rate-price already uses on the cards, and allowed to wrap. The day she
   prices an add-on the slot reads "$X" in that same label style and nothing
   else has to change. */
.svc-slide-price {
  font-family: var(--label);
  font-size: clamp(0.75rem, 1vw, 0.8125rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--glow);
  white-space: normal;
  text-align: right;
  flex: 0 1 auto;
}
.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;
  color: rgba(245, 243, 240, 0.6);
}
/* This note is the page's HUB slot: it carries the four cross-links to the
   other stamped keyword pages (the in-card cross-link was removed by owner
   decision 2026-08-02, and a link inside a data-bc-pkg-desc would be destroyed
   on the first price-list save). At the note's own 0.6 alpha the links were
   indistinguishable from the sentence around them, so they take --glow at full
   opacity: 8.7:1 on --band against the sentence's 5.8:1, plus an underline so
   the distinction is not carried by colour alone. */
.svc-addons-note a {
  color: var(--glow);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.3s;
}
.svc-addons-note a:hover { color: var(--cream); }

/* ---------- 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: 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; }
}


/* 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; }


/* THE ADD-ON BAND HIDES ITSELF WHEN THE CLIENT HAS NONE (2026-08-27).
   Deleting every add-on from the portal Account tab empties this container,
   and without this rule the page still renders the heading, the lede and the
   button over nothing. The inert <template data-bc-pkg-item> lives in its own
   DocumentFragment, so :has() cannot see it and the band stays hidden until
   src/site_prices.js clones a real card back in.
   Scoped to this section's OWN id on purpose: the contact form's add-on
   checkbox group carries data-bc-pkg-list="addon" too, so a generic selector
   would hide the whole inquiry form the moment the add-on list went empty. */
#addons:not(:has([data-bc-pkg])) { display: none; }