/* ==========================================================================
   Light Zone Photography - shared components
   --------------------------------------------------------------------------
   Blocks that appear on three or more page types: the interior page hero, breadcrumbs, category cards, the coverflow carousel, stat and step rows, the split feature, service cards, the accordion, the checklist and the closing call to action.

   These are deliberately NOT duplicated into each page stylesheet. Copying them would mean a visitor downloads the same rules on every page and a change has to be made in six places instead of one.

   Loaded by: every page except the landing page intro
   ========================================================================== */
.pagehero {
  position: relative;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}
/* The WebGL renderer appends its canvas as the last child, and on the interior
   pages that child follows a cover <img>, so it has to be taken out of flow. */
.pagehero__bg canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.pagehero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.pagehero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
  transform: scale(1.08);
}
.pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--ink-900) 4%, rgba(8, 8, 12, 0.55) 50%, rgba(8, 8, 12, 0.8)),
    radial-gradient(80vw 60vh at 20% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
}
.pagehero__inner { display: grid; gap: 1.6rem; max-width: 60rem; }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.crumbs a { transition: color 0.35s; }
.crumbs a:hover { color: var(--accent); }
.crumbs li { display: flex; align-items: center; gap: 0.55rem; }
.crumbs li + li::before { content: "/"; opacity: 0.4; }
.crumbs [aria-current] { color: var(--text-dim); }


/* --- Category grid ----------------------------------------------------- */
.catgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
}

.catcard { position: relative; }
.catcard .tilt__inner {
  display: block;                 /* the inner element is an <a> */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-800);
  transition: transform 0.7s var(--ease-out), border-color 0.6s, box-shadow 0.7s;
}
.catcard:hover .tilt__inner {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-lift);
}
.catcard__media {
  background: var(--ink-800);
  display: block;            /* it is a <span>, so it must be blockified */
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.catcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out), filter 0.8s;
  filter: saturate(0.85) brightness(0.82);
}
.catcard:hover .catcard__media img {
  transform: scale(1.1);
  filter: saturate(1.05) brightness(1);
}
.catcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 8, 0.95) 2%, rgba(5, 5, 8, 0.25) 45%, transparent 70%);
}
.catcard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.25rem, 2vw, 1.9rem);
  display: grid;
  gap: 0.5rem;
}
.catcard__index {
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.catcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1.08;
}
.catcard__count {
  font-size: var(--fs-small);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.catcard:hover .catcard__count { opacity: 1; transform: none; }

/* Group heading strip above each set of category cards */
.catgroup + .catgroup { margin-top: clamp(3rem, 7vw, 5.5rem); }
.catgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--line-soft);
}
.catgroup__title { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.catgroup__blurb { font-size: var(--fs-small); color: var(--text-faint); }


/* --- Coverflow: a curved 3D carousel of featured frames ---------------- */
.coverflow {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  height: clamp(360px, 62vh, 640px);
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.coverflow:active { cursor: grabbing; }
.coverflow__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(-620px) rotateY(var(--spin, 0deg));
  transition: transform 0.9s var(--ease-out);
}
.coverflow[data-dragging="true"] .coverflow__ring { transition: none; }
.coverflow__cell {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(230px, 26vw, 380px);
  aspect-ratio: 3 / 4;
  margin: 0;
  /* --a is written by JS; the fallback keeps the stack sane for one frame */
  transform:
    translate(-50%, -50%)
    rotateY(var(--a, 0deg)) translateZ(620px);
  transform-style: preserve-3d;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-deep);
  backface-visibility: hidden;
}
.coverflow__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: brightness(0.7) saturate(0.9);
  transition: filter 0.6s;
}
.coverflow__cell figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(to top, rgba(5, 5, 8, 0.95), transparent);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.coverflow__cell[data-active="true"] img { filter: brightness(1) saturate(1.02); }

.coverflow__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.iconbtn {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: var(--text-dim);
  transition: color 0.4s, border-color 0.4s, transform 0.4s var(--ease-out), background-color 0.4s;
}
.iconbtn:hover {
  color: var(--ink-950);
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}
.coverflow__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--text-faint);
  min-width: 5.5rem;
  text-align: center;
}


/* --- Stats ------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.stat {
  background: var(--ink-900);
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1rem, 2vw, 2rem);
  display: grid;
  gap: 0.5rem;
  transition: background-color 0.6s var(--ease-out);
}
.stat:hover { background: var(--ink-800); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}


/* --- Process / numbered steps ------------------------------------------ */
.steps { display: grid; gap: 1px; background: var(--line-soft); }
.step {
  background: var(--ink-900);
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  transition: background-color 0.6s var(--ease-out), padding-left 0.6s var(--ease-out);
}
.step:hover { background: var(--ink-850); padding-left: 1rem; }
.step__num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.step__title { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.step__text { color: var(--text-dim); font-size: 0.97rem; }


/* --- Big CTA ----------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60vw 50vh at 50% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}
.cta__inner { display: grid; gap: 2rem; justify-items: center; }
.cta__title { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.95; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }


/* --- Split feature (image + copy), used on about/services -------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
}
/* Here the clipping box is also the perspective parent, so the tilted child
   is oversized slightly to keep its corners outside the frame. */
.split__media .tilt__inner { --tilt-scale: 1.09; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { display: grid; gap: 1.5rem; align-content: center; }


/* --- Service cards ----------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }
.services--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service__list a { color: var(--text-dim); transition: color 0.35s; }
.service__list a:hover { color: var(--accent); }
.service {
  background: var(--ink-900);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out), background-color 0.6s;
}
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.service:hover { transform: perspective(var(--depth)) translateZ(30px); background: var(--ink-850); }
.service:hover::before { opacity: 1; }
.service__num {
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.service__title { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.service__text { color: var(--text-dim); font-size: 0.97rem; }
.service__list { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.service__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.service__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 1px;
  background: var(--accent);
}


/* --- Accordion / FAQ --------------------------------------------------- */
.accordion { border-top: 1px solid var(--line-soft); }
.acc {
  border-bottom: 1px solid var(--line-soft);
  perspective: var(--depth);
}
/* The question stays a real heading; the button just fills it. */
.acc__q { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.4vw, 1.85rem) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  color: var(--text-dim);
  transition: color 0.4s var(--ease-out);
}
.acc__btn:hover,
.acc__btn[aria-expanded="true"] { color: var(--text); }
.acc__sign {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ease-out), opacity 0.4s;
}
.acc__sign::before { width: 16px; height: 1px; }
.acc__sign::after { width: 1px; height: 16px; }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.6s var(--ease-out);
}
.acc__inner {
  padding-bottom: clamp(1.25rem, 2.4vw, 1.85rem);
  color: var(--text-dim);
  max-width: 62ch;
  opacity: 0;
  transform: translateY(-10px) rotateX(-6deg);
  transform-origin: top;
  transition: opacity 0.5s var(--ease-out) 0.1s, transform 0.6s var(--ease-out) 0.1s;
}
.acc[data-open="true"] .acc__inner { opacity: 1; transform: none; }


.checklist { display: grid; gap: 0.85rem; }
.checklist li {
  position: relative;
  padding-left: 2rem;
  color: var(--text-dim);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 6px;
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(-45deg);
}


/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .catgrid,
  .services,
  .services--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .step { grid-template-columns: 4rem minmax(0, 1fr); }
  .step__text { grid-column: 2; }
}

@media (max-width: 760px) {
  .catgrid,
  .services,
  .services--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .catcard__count,
  .acc__inner { opacity: 1 !important; transform: none !important; }
}