/* ==========================================================================
   Jannelle Orilla — Case study & work library pages
   Loaded in addition to styles.css on every page except the homepage:
   /work/{slug}/, /resume/, /thank-you/ and 404.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CASE HERO
   -------------------------------------------------------------------------- */
.case-hero { padding-block: clamp(44px, 5.5vw, 84px) clamp(34px, 4vw, 58px); border-bottom: 1px solid var(--line); }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(30px, 4.5vw, 68px); align-items: center; }
.case-kicker { font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.case-hero h1 { margin-bottom: 18px; }
.case-tagline { font-family: var(--font-accent); font-size: clamp(1.15rem, 2vw, 1.5rem); font-style: italic; color: var(--ink-soft); margin-bottom: 18px; letter-spacing: -.01em; }
.case-hero p { color: var(--ink-soft); }

.case-hero-media { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.case-hero-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: 30px; }
.case-facts > div { background: var(--bg); padding: 16px 18px; }
.case-facts span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
/* Values here are domains — unbreakable strings with no spaces. Without this a
   long one (lemonrefreshofficial.com) sets the column's min-content floor and
   pushes the grid wider than the viewport. */
.case-facts strong { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   2. EXECUTIVE SUMMARY
   -------------------------------------------------------------------------- */
.case-summary { background: var(--paper); border-bottom: 1px solid var(--line); }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(22px, 3vw, 44px); }
.summary-block h3 { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 11px; }
.summary-block p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   3. CASE LAYOUT — sticky contents + content column
   -------------------------------------------------------------------------- */
.case-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: clamp(30px, 4.5vw, 72px); align-items: start; }

.case-nav { position: sticky; top: 104px; }
.case-nav h2 { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.case-nav a {
  display: flex; align-items: center; min-height: 44px;   /* was 37px */
  font-size: 14px; color: var(--muted); text-decoration: none;
  padding: 7px 0 7px 14px; border-left: 2px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.case-nav a:hover { color: var(--ink); border-left-color: var(--stone-400); }
.case-nav a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* Mobile: collapsible contents */
.case-nav-mobile { display: none; margin-bottom: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.case-nav-mobile summary {
  padding: 15px 18px; cursor: pointer; font-size: 14.5px; font-weight: 600;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.case-nav-mobile summary::-webkit-details-marker { display: none; }
.case-nav-mobile summary::after { content: "+"; font-size: 19px; color: var(--accent); line-height: 1; }
.case-nav-mobile[open] summary::after { content: "\2212"; }
.case-nav-mobile nav { padding: 0 18px 14px; display: grid; }
.case-nav-mobile nav a {
  display: flex; align-items: center; min-height: 44px;   /* was 35.5px */
  font-size: 14.5px; color: var(--ink-soft); text-decoration: none;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.case-nav-mobile summary { min-height: 44px; }

.case-content > section { padding-block: clamp(38px, 4.6vw, 66px); border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.case-content > section:first-child { padding-top: 0; }
.case-content > section:last-child { border-bottom: 0; }
.case-content h2 { margin-bottom: 18px; }
.case-content h3 { margin: 34px 0 12px; }

.case-content p, .case-content li { color: var(--ink-soft); }
.case-content > section > p:first-of-type { font-size: 1.06rem; }

/* Readable measure for long-form prose */
.case-content p, .case-content ul, .case-content ol { max-width: 68ch; }

/* --------------------------------------------------------------------------
   4. CARD GRIDS
   -------------------------------------------------------------------------- */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; margin: 24px 0; }
.case-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; background: var(--paper); }
.case-card h3 { margin: 0 0 9px; font-size: 1.1rem; }
.case-card p { font-size: 14.5px; margin: 0; max-width: none; }

/* Decision callout — why a choice mattered */
.decision {
  border-left: 2px solid var(--accent); background: var(--accent-tint);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 26px 0;
}
.decision h3 { margin: 0 0 7px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); }
.decision p { margin: 0; font-size: 15px; color: var(--ink-soft); max-width: none; }

/* --------------------------------------------------------------------------
   5. EVIDENCE — comparisons, galleries, sequences
   -------------------------------------------------------------------------- */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 16px; margin: 26px 0; }
.compare-item { margin: 0; }
.compare-item button, .gallery-item button {
  display: block; width: 100%; padding: 0; cursor: zoom-in; background: none;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .25s var(--ease);
}
.compare-item button:hover, .gallery-item button:hover { border-color: var(--accent); }
.compare-item img, .gallery-item img { width: 100%; display: block; }
.compare-label {
  display: inline-block; margin-top: 10px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.compare-item:has(.compare-label) .compare-label::before { content: ""; }

.photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; margin: 26px 0; }
.gallery-item { margin: 0; }
.gallery-caption { margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ---- Social post wall ------------------------------------------------------
   The Facebook captures are small (about 220px wide at source), so they are
   never shown larger than roughly their own size: uniform 4:5 frames, anchored
   to the top of the post (page name, date, opening lines, artwork), with the
   whole capture one tap away in the lightbox. Equal frames and a two-line
   caption slot keep every row level, whatever each post's length. */
.post-wall { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px 16px; }
.post-wall .gallery-item button {
  position: relative; aspect-ratio: 4 / 5; background: #fff;
  box-shadow: 0 1px 2px rgba(40, 19, 29, .04), 0 10px 26px rgba(40, 19, 29, .07);
  transition: border-color .25s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-wall .gallery-item button:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(40, 19, 29, .05), 0 16px 34px rgba(40, 19, 29, .11); }
.post-wall .gallery-item img { height: 100%; object-fit: cover; object-position: top center; }
/* Soft fade where the frame cuts the post, with a quiet "full post" cue. */
.post-wall .gallery-item button::after {
  content: "View full post"; position: absolute; inset: auto 0 0; padding: 38px 12px 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--wine); text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .94) 58%);
}
.post-wall .gallery-caption {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: 3em;
}

/* ---- Phones: galleries become a swipeable filmstrip -------------------------
   Stacked, a gallery of eleven layouts was over 5,000px of scrolling. Here each
   gallery scrolls sideways instead, and only the gallery scrolls — the page
   gains no horizontal overflow. Every image in a strip shares one height
   (--strip-h, set by script.js from the widest image so nothing is cropped),
   so a tall strip and a wide banner sit side by side at their true
   proportions, and the next frame always peeks in to say "swipe". */
@media (max-width: 640px) {
  .photo-gallery {
    display: flex; align-items: flex-start; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: 4px; scrollbar-width: none;
    /* A scroll container still reports its full content width as its minimum
       size, which widened the whole case-study column past the screen.
       Containing its inline size makes the strip take the column's width
       instead of setting it. */
    contain: inline-size;
  }
  .photo-gallery::-webkit-scrollbar { display: none; }
  .photo-gallery .gallery-item { flex: 0 0 auto; width: min-content; scroll-snap-align: start; }
  .photo-gallery .gallery-item img {
    width: auto; max-width: 84vw;
    height: var(--strip-h, 56vw); object-fit: cover;
  }
  .photo-gallery .gallery-caption { font-size: 14px; }

  .post-wall .gallery-item { width: 62vw; }
  .post-wall .gallery-item img { width: 100%; max-width: none; height: 100%; }

  /* Position dots, filled in by script.js — an orientation aid only. */
  .strip-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: -8px 0 26px; }
  .strip-dots i {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(90, 24, 48, .2);
    transition: background .25s var(--ease), transform .25s var(--ease);
  }
  .strip-dots i.on { background: var(--wine); transform: scale(1.45); }
}
@media (min-width: 641px) { .strip-dots { display: none; } }

.case-sequence { display: grid; gap: 18px; margin: 26px 0; }
.case-sequence-item {
  margin: 0; display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; background: var(--paper);
}
.case-sequence-item:not(:has(button)) { grid-template-columns: 1fr; }
.case-sequence-caption .step-label {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 9px;
}
.case-sequence-caption h3 { margin: 0 0 8px; font-size: 1.08rem; }
.case-sequence-caption p { font-size: 14.5px; margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   6. PROOF METRICS
   -------------------------------------------------------------------------- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin: 26px 0; }
.proof-card { background: var(--paper); padding: 22px; }
.proof-card span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.proof-card strong { font-family: var(--font-accent); font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.proof-card .delta { color: var(--accent); }

.result-note { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; background: var(--paper); margin: 26px 0; }
.result-note h3 { margin: 0 0 8px; font-size: 1rem; }
.result-note p { margin: 0; font-size: 14.5px; max-width: none; }
/* The claiming blocks run to two or three paragraphs; without this they set solid. */
.result-note p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   7. FLOW STEPS
   -------------------------------------------------------------------------- */
.flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 24px 0; }
.flow-step {
  font-size: 13.5px; font-weight: 500; padding: 9px 15px;
  border: 1px solid var(--line-strong); border-radius: 100px; background: var(--paper);
}
.flow-arrow { color: var(--accent); font-size: 14px; }

/* --------------------------------------------------------------------------
   8. TESTIMONIAL
   -------------------------------------------------------------------------- */
.testimonial {
  border: 0; border-left: 2px solid var(--accent);
  margin: 26px 0; padding: 6px 0 6px 26px;
}
.testimonial-quote { font-family: var(--font-accent); font-size: clamp(1.14rem, 2vw, 1.42rem); line-height: 1.46; color: var(--ink); margin: 0 0 14px; letter-spacing: -.012em; max-width: 46ch; }
.testimonial-attribution { font-size: 13.5px; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   9. TAGS
   -------------------------------------------------------------------------- */
.skills-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.tag-chip { font-size: 12.5px; font-weight: 500; padding: 6px 13px; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--paper); }

/* --------------------------------------------------------------------------
   10. NEXT PROJECT
   -------------------------------------------------------------------------- */
.next-project {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(26px, 3.5vw, 42px); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.next-project:hover { border-color: var(--accent); background: var(--bg); }
.next-project span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.next-project h3 { margin: 7px 0 0; font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.next-project .arrow { font-size: 1.6rem; color: var(--accent); }

/* --------------------------------------------------------------------------
   11. WORK LIBRARY — filters & sample cards
   -------------------------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.filter-btn {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  padding: 9px 17px; border-radius: 100px; cursor: pointer;
  min-height: 44px;                       /* was 36px — below the 44px minimum */
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter-btn:hover { border-color: var(--stone-400); }
.filter-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }

.samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 22px; }
.sample-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.sample-media { display: block; border-bottom: 1px solid var(--line); }
.sample-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sample-card .video-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.sample-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sample-body h3 { font-size: 1.06rem; margin: 0; }
.sample-body p { font-size: 14px; color: var(--ink-soft); margin: 0; max-width: none; }
.sample-body .tag-chip { align-self: flex-start; }

.sample-card.is-note { grid-column: 1 / -1; padding: clamp(24px, 3vw, 34px); }
.sample-card.is-note p { max-width: 70ch; }

.empty-state { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 44px 0; font-size: 15px; }

/* --------------------------------------------------------------------------
   12. THANK YOU / 404
   -------------------------------------------------------------------------- */
.centered-page { min-height: 68vh; display: grid; place-items: center; text-align: center; }
.centered-page .inner { max-width: 620px; }
.centered-page h1 { margin-bottom: 20px; }
.centered-page p { color: var(--ink-soft); font-size: 1.06rem; }
/* Layout comes from the shared CTA group rules in styles.css. */
.centered-actions { margin-top: 30px; }

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track takes its minimum from its
     content, so the sideways galleries below could push the column — and the
     page — wider than the screen. Belt and braces with the containment on
     .photo-gallery, which older Safari ignores. */
  .case-layout { grid-template-columns: minmax(0, 1fr); }
  .case-nav { display: none; }
  .case-nav-mobile { display: block; }
}

@media (max-width: 900px) {
  .case-hero-grid { grid-template-columns: 1fr; }
  .case-sequence-item { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* minmax(0, …) rather than a bare 1fr: a bare 1fr keeps min-width:auto, so the
     track cannot shrink below its longest word and the grid overflows. */
  .case-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow-steps { gap: 7px; }
  .flow-step { font-size: 12.5px; padding: 7px 12px; }
  /* Arrows read poorly stacked on narrow screens */
  .flow-arrow { display: none; }
  .next-project { flex-direction: column; align-items: flex-start; gap: 12px; }
  .next-project .arrow { display: none; }
  .samples-grid { grid-template-columns: 1fr; }
  .testimonial { padding-left: 18px; }
}

@media (max-width: 400px) {
  .case-facts { grid-template-columns: 1fr; }
}

/* The live-site link on the iBlast case study had no rule of its own, which
   left it a 17px-tall inline target — below the WCAG 2.2 24x24 minimum.
   Inline-block plus vertical padding gives it a real hit area without
   changing the line it sits on. */
.case__url {
  display: inline-block;
  padding-block: 5px;
  font-weight: 600;
  color: var(--wine);
  border-bottom: 1px solid rgba(90, 24, 48, .3);
  transition: color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.case__url:hover { color: var(--terracotta); border-color: currentColor; }


/* Inline body links clear the 24px target minimum. WCAG 2.2 exempts links set
   in a sentence, but the rest of this site passes without the exception and a
   mixed standard is harder to defend than a uniform one. */
/* :not(.button) — a button that sits in a paragraph is still a button. Without
   it this rule replaced the button's inline-flex with inline-block, which
   switched off its centring and left the label 12px above the middle. */
.case-content p a:not(.button),
.case-hero p a:not(.button) {
  display: inline-block;
  padding-block: .22rem .18rem;
}
/* On touch devices those inline links measure about 31-34px tall — past WCAG
   2.2's 24px floor, short of the 44px both Apple and Google ask for. More
   padding is not the answer: an inline-block's padding grows the line box, so
   the paragraph's lines would visibly drift apart. An absolutely positioned
   overlay belongs to the link for hit-testing while taking no space at all, so
   the text, the underline and every line stay exactly where they are. Pointer
   devices are unaffected, so nothing overlays text you might want to select. */
@media (pointer: coarse) {
  .case-content p a:not(.button), .case-hero p a:not(.button), .case__url { position: relative; }
  .case-content p a:not(.button)::after,
  .case-hero p a:not(.button)::after,
  .case__url::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}