/* =========================================================
   DIGIQAL — Single portfolio page (case study)
   Figma frame "Portfolio Page- Inner Page" 659:6787

   Loaded AFTER style.css, which supplies the tokens, the header, the buttons,
   the contact block, the footer — and, because this page IS the Porto Palace
   case study the home page teases, the whole video apparatus too: .work__frame,
   .vcrop / .vcrop--work / .vcrop--phone*, .phones and .video-toggle are reused
   unchanged. The Figma crop transforms on this page's Desktop-comp 2 and the
   three Mob-comps are identical to the home page's, to five decimals.

   New here: the case hero, the statement block, the screenshots rail and the
   project-nav bar.

   Figma section padding is 100px top/bottom; the content box is 1440px wide
   (240px side margins on the 1920 frame) = --container-hero.
   ========================================================= */

/* =========================================================
   CASE HERO — Figma 659:6792
   column, centered, gap 46 (+10 frame padding either side = 66 between texts)
   ========================================================= */
.case-hero { padding-block: calc(173px + clamp(40px, 6.25vw, 120px)) var(--section-y); }
.case-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4.6vw, 66px);
  text-align: center;
}

/* Brand lockup: the 112² mark over the wordmark, 40px apart, in a 239px column. */
.case-hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 2.8vw, 40px);
  width: 239px;
  max-width: 100%;
}
.case-hero__mark     { width: clamp(84px, 7.8vw, 112px); height: auto; }
.case-hero__wordmark { width: 100%; height: auto; }

/* Figma's gap to the title is 56, not 66 — the brand block carries no padding
   of its own while the text frames each add 10. */
.case-hero__title {
  margin-top: -10px;
  max-width: 612px;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
}

/* The frame sets this as one text run with three spaces either side of each
   pipe; as a list the separator is the CSS's job and the row can wrap. */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(12px, 1.4vw, 20px);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-btn);
  color: var(--blue);
}
.case-tags li { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); }
.case-tags li:not(:last-child)::after { content: "|"; color: currentColor; }

.case-hero__desc {
  max-width: 820px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--black);
}

/* =========================================================
   STATEMENT + DESKTOP CLIP — Figma 659:6839
   column, centered, gap 97 · head 599 wide, inner gap 22
   ========================================================= */
.case-scroll { padding-block: var(--section-y); }
.case-scroll__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(56px, 6.8vw, 97px);
}
.case-scroll__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 2.9vw, 42px);
  width: 599px;
  max-width: 100%;
  text-align: center;
}
.case-scroll__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
}
/* 22px, and the label is Light while the URL keeps the style's own Medium. */
.case-scroll__link {
  font-size: var(--fs-h4);
  font-weight: 300;
  line-height: var(--lh-h4);
  color: var(--faded);
}
.case-scroll__link a {
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.case-scroll__link a:hover { color: var(--blue); border-bottom-color: currentColor; }

/* The home page's .work__frame carries no shadow; this frame gives the node one. */
.case-scroll__frame { box-shadow: var(--sh-post); }

/* =========================================================
   SCREENSHOTS — Figma 659:6872
   title · gap 67 · rail (h475) · gap 71 · project nav (h194)
   ========================================================= */
.case-shots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4.7vw, 67px);
  padding-block: var(--section-y);
}
.case-shots__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
  text-align: center;
}
.case-shots__body {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: clamp(40px, 5vw, 71px);
}

/* The rail is full-width (the section has 0 side padding in Figma) but its first
   card starts at the 1440 content box, i.e. x240 on the frame. Expressing that
   inset as a percentage of the section rather than with 100vw keeps the
   scrollbar out of the sum, so the rail can never widen the document.
   The scrollbar is hidden, so the rail is focusable and labelled. */
.case-shots__rail {
  display: flex;
  align-items: flex-start;
  gap: 38px;
  padding-left: max(var(--gutter), calc((100% - var(--container-hero)) / 2));
  padding-right: var(--gutter);
  /* Figma's rail box is 475 tall against 413 of cards — that slack is what keeps
     the 18/18 offset card shadows from being clipped, since overflow-x also
     clips the y axis. */
  padding-bottom: 62px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.case-shots__rail::-webkit-scrollbar { display: none; }
.case-shots__rail:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Cards alternate y62 / y176 across the rail — a 114px stagger. */
.case-shot {
  flex: 0 0 420px;
  margin-top: 62px;
  scroll-snap-align: center;
}
.case-shot--wide { flex-basis: 444px; }
.case-shot--low  { margin-top: 176px; }
.case-shot img {
  width: 100%;
  aspect-ratio: 420 / 237;
  object-fit: cover;
  box-shadow: var(--sh-card);
  transition: transform .3s, box-shadow .3s;
}
.case-shot--wide img { aspect-ratio: 444 / 237; }
.case-shot img:hover { transform: translateY(-6px); box-shadow: var(--sh-card-strong); }

/* ---------- Project nav ----------
   Figma paints a 1920×194 rect of rgba(19,23,41,.7) behind this with a 106px
   layer blur. Blurred over a band only 194px tall, that resolves in Figma's own
   render to barely a tint — sampled at rgb(239,240,243) against the page's
   rgb(243,243,246), fading out towards both edges. It is rebuilt as that
   measured wash rather than as a blurred box, which costs nothing to paint.
   The arrows and label render dark in the same render, so they take --black
   (the component's own #F4F4F6 fills would be invisible on this light page). */
.case-nav {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 194px;
  padding: 63px max(var(--gutter), calc((100% - var(--container-hero)) / 2)) 0;
  background: linear-gradient(90deg,
      rgba(19, 23, 41, 0) 0%,
      rgba(19, 23, 41, .022) 22%,
      rgba(19, 23, 41, .022) 78%,
      rgba(19, 23, 41, 0) 100%);
}
.case-nav__arrow {
  flex: none;
  color: var(--black);
  transition: transform .25s, opacity .25s;
}
.case-nav__arrow:hover { opacity: .65; }
.case-nav__arrow:first-of-type:hover { transform: translateX(-4px); }
.case-nav__arrow:last-of-type:hover  { transform: translateX(4px); }
.case-nav__label {
  margin-top: -2px;               /* label sits at y61, the arrows at y63 */
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
  text-align: center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .case-shot { flex-basis: 360px; }
  .case-shot--wide { flex-basis: 380px; }
  .case-shot--low { margin-top: 130px; }
}

@media (max-width: 860px) {
  .case-hero { padding-block: calc(173px + clamp(32px, 7vw, 90px)) var(--section-y); }

  /* The pipe separators stop earning their keep once the row wraps to three or
     four lines — the tags become a plain centred list. */
  .case-tags { gap: 6px 18px; }
  .case-tags li:not(:last-child)::after { content: "·"; }

  .case-shot { flex: 0 0 min(76vw, 340px); }
  .case-shot--wide { flex-basis: min(78vw, 356px); }
  .case-shot,
  .case-shot--low { margin-top: 40px; }

  .case-nav { min-height: 0; padding-top: 32px; padding-bottom: 32px; align-items: center; }
  .case-nav__label { margin-top: 0; }
}

@media (max-width: 620px) {
  .case-nav { gap: 12px; }
  .case-nav__label { font-size: var(--fs-h4); }
}

@media (prefers-reduced-motion: reduce) {
  .case-shot img,
  .case-nav__arrow { transition: none; }
  .case-shot img:hover { transform: none; }
  .case-nav__arrow:hover { transform: none; }
}