/* Penlink Cases — Explore Cases index. Scoped under .plc, no bare selectors. */

/* Base — duplicated from case.css because the index page enqueues only
 * tokens.css + index.css. Kept in sync deliberately. */
.plc {
  position: relative; z-index: var(--plc-z);
  box-sizing: border-box;
}
.plc *, .plc *::before, .plc *::after { box-sizing: border-box; }
.plc img { display: block; max-width: 100%; height: auto; }
.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;
}
.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-index { background: var(--plc-page); font-family: var(--plc-font-text); color: var(--plc-navy);
  padding-top: var(--plc-header-clear); padding-bottom: 64px; }
@media (max-width: 980px) { .plc-index { --plc-header-clear: 110px; } }

.plc-index .plc-panel {
  width: 100%; max-width: 1280px; margin: 0 auto; background: #fff;
  border: 1px solid var(--plc-border); border-radius: var(--plc-r-panel);
  padding: 40px; box-shadow: var(--plc-shadow);
}
@media (max-width: 720px) { .plc-index .plc-panel { padding: 24px; border-radius: 0; } }

/* header */
.plc-index .plc-eyebrow {
  font-family: var(--plc-font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--plc-blue); display: block;
}
.plc-index .plc-index-h1 {
  font-family: var(--plc-font-display); font-weight: 300; font-size: 40px;
  line-height: 1.08; letter-spacing: -.02em; margin: 12px 0 0; color: var(--plc-navy);
}
.plc-index .plc-index-intro { font-size: 16px; line-height: 1.6; color: var(--plc-text); margin: 14px 0 0; max-width: 720px; }

.plc-index .plc-search { display: block; margin: 24px 0 16px; max-width: 420px; }
.plc-index .plc-search input {
  width: 100%; font: inherit; font-size: 14px; padding: 11px 14px;
  border: 1px solid var(--plc-chip-border); border-radius: var(--plc-r-btn);
  background: #fff; color: var(--plc-navy);
}
.plc-index .plc-search input:focus { outline: none; border-color: var(--plc-blue); box-shadow: 0 0 0 3px rgba(0,113,246,.16); }

.plc-index .plc-domainrail { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
.plc-index .plc-domain {
  font: inherit; font-size: 13px; cursor: pointer; padding: 7px 14px;
  border-radius: var(--plc-r-pill); background: #fff;
  border: 1px solid var(--plc-chip-border); color: var(--plc-text);
}
.plc-index .plc-domain:hover { border-color: var(--plc-blue); color: var(--plc-navy); }
.plc-index .plc-domain.is-active { background: var(--plc-chip-fill); border-color: var(--plc-blue); color: var(--plc-blue-pressed); font-weight: 600; }

/* two columns */
.plc-index .plc-index-body { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .plc-index .plc-index-body { grid-template-columns: 1fr; } }

.plc-index .plc-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.plc-index .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: 0;
}
.plc-index .plc-clear { font: inherit; font-size: 12px; cursor: pointer; background: none; border: 0; color: var(--plc-blue); padding: 0; }
.plc-index .plc-clear:hover { text-decoration: underline; }

.plc-index .plc-check { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 13px; line-height: 1.4; color: var(--plc-text); }
.plc-index .plc-check input { margin: 2px 0 0; accent-color: var(--plc-blue); flex: 0 0 auto; }

/* scroll panels — released below 1100px so the page scrolls normally on mobile */
.plc-index .plc-side-scroll { max-height: 686px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.plc-index .plc-grid-scroll { max-height: 720px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
@media (max-width: 1100px) {
  .plc-index .plc-side-scroll, .plc-index .plc-grid-scroll { max-height: none; overflow: visible; }
}
.plc-index [data-scroll-panel]::-webkit-scrollbar { width: 8px; }
.plc-index [data-scroll-panel]::-webkit-scrollbar-track { background: transparent; }
.plc-index [data-scroll-panel]::-webkit-scrollbar-thumb { background: var(--plc-scroll); border-radius: var(--plc-r-pill); }
.plc-index [data-scroll-panel]::-webkit-scrollbar-thumb:hover { background: var(--plc-scroll-hover); }

/* cards */
.plc-index .plc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-content: start; }
@media (max-width: 1400px) { .plc-index .plc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px)  { .plc-index .plc-grid { grid-template-columns: 1fr; } }

.plc-index .plc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--plc-border); border-radius: var(--plc-r-card);
  text-decoration: none; color: inherit; box-shadow: var(--plc-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.plc-index .plc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--plc-gradient); opacity: 0; transition: opacity .16s ease;
}
.plc-index .plc-card:hover { transform: translateY(-2px); box-shadow: var(--plc-shadow-3); border-color: var(--plc-chip-border); }
.plc-index .plc-card:hover::before { opacity: 1; }
.plc-index .plc-card[hidden] { display: none; }

.plc-index .plc-card-shot { display: block; aspect-ratio: 16 / 9; background: var(--plc-inset); overflow: hidden; }
.plc-index .plc-card-shot img { width: 100%; height: 100%; object-fit: cover; }
.plc-index .plc-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.plc-index .plc-card-title { font-family: var(--plc-font-display); font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -.01em; color: var(--plc-navy); }
.plc-index .plc-card-blurb { font-size: 13.5px; line-height: 1.55; color: var(--plc-text); flex: 1; }
.plc-index .plc-card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.plc-index .plc-chip {
  display: inline-block; font-size: 11.5px; line-height: 1.4; padding: 4px 10px;
  border-radius: var(--plc-r-pill); background: #fff;
  border: 1px solid var(--plc-chip-border); color: var(--plc-muted);
}
.plc-index .plc-chip--domain { background: var(--plc-chip-fill); border-color: transparent; color: var(--plc-blue-pressed); font-weight: 600; }

/* empty state */
.plc-index .plc-empty { border: 1px dashed var(--plc-chip-border); border-radius: var(--plc-r-card); padding: 48px 24px; text-align: center; color: var(--plc-muted); }
.plc-index .plc-empty p { margin: 0 0 14px; font-size: 15px; }
.plc-index .plc-clear-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: #fff;
  background: var(--plc-blue); border: 0; padding: 10px 20px; border-radius: var(--plc-r-btn);
}
.plc-index .plc-clear-btn:hover { background: var(--plc-blue-hover); }

.plc-index a:focus-visible, .plc-index button:focus-visible, .plc-index input: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;
}