/* Penlink Cases — case page.
 * Everything is scoped under .plc. The theme ships Tailwind site-wide, so no
 * bare element selectors here: they would escape into the nav and footer. */

.plc {
  background: var(--plc-page); color: var(--plc-navy); font-family: var(--plc-font-text);
  position: relative; z-index: var(--plc-z);   /* clear the theme's wave graphic */
}
.plc *, .plc *::before, .plc *::after { box-sizing: border-box; }
.plc img { display: block; max-width: 100%; height: auto; }

/* Defensive: the theme styles bare semantic elements for its own chrome, and a
 * global `header { position: absolute }` will pull ours out of flow. Neutralise
 * positioning only — padding and background are still set by our own rules. */
.plc header, .plc footer, .plc aside, .plc section, .plc nav, .plc figure, .plc main {
  position: static; float: none; inset: auto; transform: none;
  width: auto; max-width: none; min-height: 0;
}

/* Visually hidden. The theme does not define .screen-reader-text, so we ship our own. */
.plc .plc-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}

.plc-case { padding-top: var(--plc-header-clear); }
@media (max-width: 980px) { .plc-case { --plc-header-clear: 110px; } }

.plc .plc-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) { .plc .plc-wrap { padding: 0 24px; } }

/* breadcrumb */
.plc .plc-crumb { font-size: 13px; color: var(--plc-muted); padding-top: 28px; margin: 0; }
.plc .plc-crumb a { color: var(--plc-blue); text-decoration: none; }
.plc .plc-crumb a:hover { color: var(--plc-blue-hover); text-decoration: underline; }
.plc .plc-crumb span { margin: 0 6px; color: var(--plc-chip-border); }

/* split */
.plc .plc-split {
  display: grid; grid-template-columns: 470px minmax(0, 1fr);
  gap: 44px; padding-top: 44px; padding-bottom: 56px; align-items: start;
}
@media (max-width: 1100px) { .plc .plc-split { grid-template-columns: 1fr; gap: 32px; } }

.plc .plc-h1 {
  font-family: var(--plc-font-display); font-weight: 300; font-size: 40px;
  line-height: 1.08; letter-spacing: -0.02em; color: var(--plc-navy); margin: 14px 0 0;
}
.plc .plc-deck { font-size: 17px; line-height: 1.6; color: var(--plc-text); margin: 16px 0 0; }
.plc .plc-label {
  font-family: var(--plc-font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--plc-muted);
  margin: 32px 0 12px;
}
.plc .plc-body { font-size: 15px; line-height: 1.62; color: var(--plc-text); margin: 0 0 14px; }

/* chips */
.plc .plc-chiprow { display: flex; flex-wrap: wrap; gap: 7px; }
.plc .plc-chip {
  display: inline-block; font-size: 12px; line-height: 1.4;
  padding: 5px 11px; border-radius: var(--plc-r-pill);
  background: #fff; border: 1px solid var(--plc-chip-border); color: var(--plc-text);
}
.plc .plc-chip--domain { background: var(--plc-chip-fill); border-color: transparent; color: var(--plc-blue-pressed); font-weight: 600; }

/* board */
.plc .plc-board {
  background: #fff; border: 1px solid var(--plc-border);
  border-radius: var(--plc-r-panel); box-shadow: var(--plc-shadow); padding: 16px;
}
.plc .plc-board-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.plc .plc-board-title { font-family: var(--plc-font-display); font-weight: 600; font-size: 14px; color: var(--plc-navy); }
.plc .plc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.plc .plc-tab {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 6px 12px; border-radius: var(--plc-r-pill);
  background: var(--plc-surface); border: 1px solid transparent; color: var(--plc-muted);
}
.plc .plc-tab:hover { color: var(--plc-navy); }
.plc .plc-tab.is-active { background: var(--plc-chip-fill); color: var(--plc-blue-pressed); border-color: var(--plc-blue); font-weight: 600; }

.plc .plc-board-stage { background: var(--plc-inset); border-radius: var(--plc-r-card); overflow: hidden; }
.plc .plc-shot { display: none; margin: 0; position: relative; }
.plc .plc-shot.is-active { display: block; }

/* zoom affordance — covers the image, reveals a pill on hover/focus */
.plc .plc-zoom {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: zoom-in; display: flex; align-items: flex-end; justify-content: flex-end;
}
.plc .plc-zoom-pill {
  margin: 12px; padding: 6px 12px; border-radius: var(--plc-r-pill);
  background: rgba(9,38,72,.82); color: #fff;
  font-family: var(--plc-font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .04em; opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.plc .plc-zoom:hover .plc-zoom-pill,
.plc .plc-zoom:focus-visible .plc-zoom-pill { opacity: 1; transform: none; }
@media (hover: none) { .plc .plc-zoom-pill { opacity: 1; transform: none; } }
.plc .plc-shot-missing {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; letter-spacing: .04em; opacity: .85;
}

.plc .plc-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.plc .plc-thumb {
  flex: 0 1 132px; padding: 0; cursor: pointer; background: var(--plc-inset);
  border: 1px solid var(--plc-border); border-radius: 10px; overflow: hidden; line-height: 0;
}
.plc .plc-thumb.is-active { display: none; }   /* strip shows only inactive views */
.plc .plc-thumb:hover { border-color: var(--plc-blue); }
.plc .plc-thumb-missing { display: block; aspect-ratio: 16 / 10; }

/* key features */
.plc .plc-features { background: var(--plc-surface); padding: 48px 0 56px; }
.plc .plc-h2 { font-family: var(--plc-font-display); font-weight: 600; font-size: 22px; color: var(--plc-navy); margin: 0 0 24px; }
.plc .plc-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 32px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 980px) { .plc .plc-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .plc .plc-feature-grid { grid-template-columns: 1fr; } }
.plc .plc-feature b { display: block; font-family: var(--plc-font-display); font-weight: 600; font-size: 15px; color: var(--plc-navy); margin-bottom: 7px; }
.plc .plc-feature span { display: block; font-size: 14px; line-height: 1.6; color: var(--plc-text); }
.plc .plc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--plc-blue); margin-right: 8px; vertical-align: middle; }

/* CTA */
.plc .plc-cta { background: var(--plc-navy); padding: 44px 0; }
.plc .plc-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.plc .plc-cta-h { font-family: var(--plc-font-display); font-weight: 600; font-size: 22px; color: #fff; margin: 0 0 6px; }
.plc .plc-cta-b { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.76); margin: 0; max-width: 620px; }
.plc .plc-btn {
  flex-shrink: 0; display: inline-block; text-decoration: none;
  font-family: var(--plc-font-display); font-weight: 600; font-size: 15px;
  color: var(--plc-navy); background: var(--plc-gradient);
  padding: 14px 26px; border-radius: var(--plc-r-btn);
}
.plc .plc-btn:hover { color: var(--plc-navy); opacity: .92; }

/* disclaimer */
.plc .plc-disclaimer { background: var(--plc-surface); padding: 26px 0; }
.plc .plc-disclaimer p { font-size: 13px; line-height: 1.6; color: var(--plc-muted); margin: 0; }

/* focus */
.plc a:focus-visible, .plc button:focus-visible { outline: 2px solid var(--plc-blue); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
 * Theme decorative overlay.
 *
 * base.twig includes gradient.twig INSIDE <main>, after the content block, so
 * the wave graphic is a later sibling of our markup. It paints over the panel
 * and captures pointer events, which makes cards unclickable.
 *
 * These stylesheets are enqueued only on case pages and pages carrying the
 * [penlink_cases] shortcode, so this does not touch the rest of the site.
 * If the wave persists, its class differs from the guesses below — inspect it
 * and add the real one here.
 * ------------------------------------------------------------------------ */
.gradient-bottom,
.gradient-top,
.gradient,
[class*="gradient-bottom"],
[class*="gradient_bottom"] {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Lightbox.
 *
 * A modal <dialog> renders in the browser's top layer, so it escapes ancestor
 * transforms, overflow:hidden and every z-index on the page. That is why this
 * block is deliberately NOT scoped under .plc, and why it needs no huge
 * z-index: the top layer is already above everything.
 * ------------------------------------------------------------------------ */
dialog.plc-lightbox {
  position: fixed; inset: 0;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 32px; border: 0;
  background: rgba(5,17,34,.94); color: #fff; overflow: hidden;
}
dialog.plc-lightbox::backdrop { background: rgba(5,17,34,.7); }
dialog.plc-lightbox[open] { display: flex; align-items: center; justify-content: center; gap: 8px; }
dialog.plc-lightbox:not([open]) { display: none; }

/* Fallback for browsers without dialog.showModal() */
.plc-lightbox--fallback { z-index: 99999; }
.plc-lightbox--fallback[hidden] { display: none; }

html.plc-lb-open { overflow: hidden; }

.plc-lightbox .plc-lb-figure {
  margin: 0; max-width: min(1600px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.plc-lightbox .plc-lb-img {
  max-width: 100%; max-height: 84vh; width: auto; height: auto;
  border-radius: 10px; background: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.plc-lightbox .plc-lb-cap {
  display: flex; gap: 14px; align-items: baseline;
  font-family: "DM Sans", system-ui, sans-serif; font-size: 13px; color: rgba(255,255,255,.82);
}
.plc-lightbox .plc-lb-count { color: rgba(255,255,255,.5); }

.plc-lightbox button {
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.22);
  border-radius: 9999px; cursor: pointer; line-height: 1; font-family: inherit;
  transition: background .16s ease, border-color .16s ease;
}
.plc-lightbox button:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.plc-lightbox button:focus-visible { outline: 2px solid #00DCC3; outline-offset: 3px; }
.plc-lightbox button[hidden] { display: none; }

.plc-lightbox .plc-lb-close {
  position: absolute; top: 20px; right: 24px;
  width: 40px; height: 40px; font-size: 24px;
}
.plc-lightbox .plc-lb-prev,
.plc-lightbox .plc-lb-next { width: 44px; height: 44px; font-size: 26px; flex: 0 0 auto; }

@media (max-width: 720px) {
  dialog.plc-lightbox { padding: 16px; }
  .plc-lightbox .plc-lb-prev, .plc-lightbox .plc-lb-next { width: 38px; height: 38px; }
}