/*
 * Links interface
 *
 * A list of link cards, one per child page. Every tinted surface on a card is
 * derived from a single `--lk-base` hex set inline by the template, so a page's
 * `base_color:` front matter is the only knob that has to change to repaint it.
 *
 * The derived ramp:
 *   --lk-shade   logo column behind the white tile   (base, darkened)
 *   --lk-edge    divider between the two columns     (base, darkened hard)
 *   --lk-deep    Thai title                          (base, near-black)
 *   --lk-bright  the +/- glyph on the dark cell      (base, lifted)
 *   --lk-pale    the play arrow, base variant         (base, washed)
 *
 * The link bar runs off a second colour, --lk-accent, which defaults to the
 * base so an item that sets no `accent_color:` looks exactly as before. Its
 * gradient keeps the same shape, just built from the accent:
 *   --lk-accent-dark  the dark end of the gradient        (accent, darkened)
 *   --lk-accent-edge  the highlight rule along its top    (accent, lifted)
 *   --lk-accent-pale  the play arrow                      (accent, washed)
 */

.lk-section {
  --lk-canvas: #1a1a1a;
  --lk-strip: #292929;
  --lk-cell: #4c4c4c;
  --lk-panel: #ededed; /* reveal panel — a soft gray, not stark white */
  --lk-panel-text: #1f1f1f;
  --lk-panel-muted: #5a5b60;
  --lk-panel-rule: rgba(0, 0, 0, 0.13);
  --lk-radius: 16px;
  --lk-font: "Sarabun", "Noto Sans Thai", var(--pico-font-family-sans-serif, sans-serif);

  background: var(--lk-canvas);
  padding-block: clamp(1.5rem, 5vw, 3.5rem);
}

.lk-intro,
.lk-list {
  max-width: 71rem; /* 1136px */
  margin-inline: auto;
  padding-inline: clamp(1rem, 3.5vw, 1.5rem);
}

.lk-intro {
  color: #f2f2f2;
  font-family: var(--lk-font);
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.lk-intro :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

.lk-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vw, 2.75rem);
}

/* ---------------------------------------------------------------- the card */

.lk-card {
  --lk-base: #33a6ed;
  --lk-shade: color-mix(in oklab, var(--lk-base) 74%, #000);
  --lk-edge: color-mix(in oklab, var(--lk-base) 38%, #000);
  --lk-deep: color-mix(in oklab, var(--lk-base) 26%, #000);
  --lk-bright: color-mix(in oklab, var(--lk-base) 86%, #fff);
  --lk-pale: color-mix(in oklab, var(--lk-base) 55%, #fff);
  --lk-link: color-mix(in oklab, var(--lk-base) 58%, #000);
  --lk-link-hover: color-mix(in oklab, var(--lk-base) 40%, #000);

  --lk-accent: var(--lk-base);
  --lk-accent-dark: color-mix(in oklab, var(--lk-accent) 82%, #000);
  --lk-accent-edge: color-mix(in oklab, var(--lk-accent) 58%, #fff);
  --lk-accent-pale: color-mix(in oklab, var(--lk-accent) 55%, #fff);

  font-family: var(--lk-font);
  color: #fff;
  --pico-color: #fff;
  border-radius: var(--lk-radius);
  overflow: hidden;
  /* Isolate so the card's own stacking context clips cleanly on iOS Safari,
   * which otherwise leaks square corners through `overflow: hidden`. */
  isolation: isolate;
}

/* ------------------------------------------------------------- card header */

.lk-head {
  display: grid;
  /* Tracks the mockup's 40% at narrow widths, then stops growing so the extra
   * room on a 1136px card goes to the text rather than to a huge logo tile. */
  grid-template-columns: minmax(0, clamp(7rem, 40%, 15rem)) minmax(0, 1fr);
  background: var(--lk-base);
}

.lk-logo {
  background: var(--lk-shade);
  border-right: 2px solid var(--lk-edge);
  padding: clamp(0.5rem, 1.8vw, 0.85rem);
  display: grid;
  place-items: center;
}

.lk-logo-tile {
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 8%;
}

/* With a destination set, the tile is an anchor. Strip Pico's link styling and
 * give it a light hover so the affordance reads. */
a.lk-logo-tile {
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease;
}

a.lk-logo-tile:hover {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  a.lk-logo-tile,
  a.lk-logo-tile:hover {
    transition: none;
    transform: none;
  }
}

.lk-logo-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lk-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lk-titles {
  flex: 1;
  padding: clamp(0.7rem, 2.6vw, 1.5rem) clamp(0.75rem, 2.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3em;
}

.lk-title-th {
  margin: 0;
  font-family: var(--lk-font);
  font-size: clamp(1.6rem, 4.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--lk-deep);
  text-wrap: balance;
}

.lk-title-en {
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.lk-tagline {
  margin: 0.15em 0 0;
  font-size: clamp(1rem, 2.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}

.lk-title-th::before {
  content: none;
}

/* ---------------------------------------------------------------- link bar */

.lk-linkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(0.4rem, 1.6vw, 1.15rem) clamp(0.7rem, 2.4vw, 1.4rem);
  border-top: 1px solid var(--lk-accent-edge);
  background: linear-gradient(90deg, var(--lk-accent-dark) 0%, var(--lk-accent) 70%);
  color: #fff;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.lk-linkbar:hover,
.lk-linkbar:focus-visible {
  filter: brightness(1.12);
  text-decoration: none;
}

.lk-url {
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lk-play {
  flex: none;
  width: clamp(1.4rem, 4vw, 2.4rem);
  height: auto;
  fill: var(--lk-accent-pale);
}

/* ------------------------------------------------- description strip + toggle */

.lk-reveal {
  background: var(--lk-strip);
}

.lk-summary {
  display: grid;
  grid-template-columns: 1fr clamp(3.25rem, 12%, 4.5rem);
  align-items: stretch;
  cursor: pointer;
  list-style: none;
}

.lk-reveal {
  margin-bottom: 0;
}

.lk-summary,
.lk-reveal[open] > .lk-summary {
  margin-bottom: 0;
  line-height: inherit;
  text-align: start;
}

/* Kill the native disclosure triangle in every engine, plus the Blades chevron
 * that rides in ::after — with the summary laid out as a grid its `float:right`
 * is ignored and it drops onto a row of its own under the strip. */
.lk-summary::-webkit-details-marker {
  display: none;
}
.lk-summary::marker {
  content: "";
}
.lk-summary::after {
  display: none;
}

.lk-desc {
  margin: 0;
  padding: clamp(0.65rem, 2.4vw, 1.25rem) clamp(0.85rem, 2.8vw, 1.5rem);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: #fff;
  align-self: center;
}

.lk-toggle {
  background: var(--lk-cell);
  display: grid;
  place-items: center;
}

.lk-toggle::before,
.lk-toggle::after {
  content: "";
  grid-area: 1 / 1;
  width: clamp(1.35rem, 4vw, 1.75rem);
  height: 5px;
  border-radius: 1px;
  background: var(--lk-bright);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* The vertical stroke of the plus — it folds away into the minus on open. */
.lk-toggle::after {
  transform: rotate(90deg);
}

.lk-reveal[open] .lk-toggle::after {
  transform: rotate(0deg);
  opacity: 0;
}

.lk-summary:focus-visible {
  outline: 2px solid var(--lk-bright);
  outline-offset: -3px;
}

/* -------------------------------------------------------------- reveal body */

/* The panel is the one light surface on an otherwise dark page, so every Pico
 * token that decides a text or border colour has to be re-pointed here. Pico
 * sets `color` directly on p/li/table/etc rather than letting it inherit, so
 * the variables do the broad work and the explicit rules below cover the
 * elements markdown actually produces. */
.lk-body {
  background-color: var(--lk-panel);
  /* The base color bleeds down out of the strip and dissolves into the panel. */
  background-image: linear-gradient(
    to bottom,
    var(--lk-base) 0,
    var(--lk-panel) 80px
  );
  color: var(--lk-panel-text);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.75;

  --pico-color: var(--lk-panel-text);
  --pico-h1-color: #111;
  --pico-h2-color: #111;
  --pico-h3-color: #111;
  --pico-h4-color: #111;
  --pico-h5-color: #111;
  --pico-h6-color: #111;
  --pico-muted-color: var(--lk-panel-muted);
  --pico-muted-border-color: var(--lk-panel-rule);
  --pico-blockquote-border-color: var(--lk-panel-rule);
  --pico-table-border-color: var(--lk-panel-rule);
  --pico-code-background-color: rgba(0, 0, 0, 0.06);
  --pico-code-color: #24292f;
  --pico-mark-background-color: #ffe9a8;
  --pico-mark-color: #1f1f1f;
  --pico-primary: var(--lk-link);
  --pico-primary-hover: var(--lk-link-hover);

  /* Clear the gradient before the first line of text lands on it. */
  padding: clamp(4rem, 10vw, 5.5rem) clamp(1.1rem, 4vw, 2rem)
    clamp(1.5rem, 5vw, 2.5rem);
}

/* Quark 2 declares `p, li { font-size: 1rem; line-height: 1.7 }` directly on the
 * elements, so the panel's own font-size never reached its prose no matter how
 * large it was set — same trap as the colour above. Hand both properties back
 * to the container. */
.lk-body :is(p, ul, ol, li, dl, dt, dd, table, th, td, address, figcaption, pre),
.lk-intro :is(p, ul, ol, li) {
  font-size: inherit;
  line-height: inherit;
}

.lk-body :is(p, ul, ol, li, dl, dt, dd, table, th, td, address, figcaption, pre) {
  color: var(--lk-panel-text);
}

.lk-body > :first-child {
  margin-top: 0;
}

.lk-body > :last-child {
  margin-bottom: 0;
}

.lk-body :is(h1, h2, h3, h4, h5, h6) {
  color: #111;
  font-family: var(--lk-font);
}

/* Quark's h2 accent bar again — inside the panel it should read as ink, not as
 * the dark-theme white it inherits. */
.lk-body h2::before {
  background: #111;
}

.lk-body :is(strong, b) {
  color: #000;
}

.lk-body blockquote {
  border-inline-start: 3px solid var(--lk-base);
  color: var(--lk-panel-muted);
}

.lk-body :is(code, kbd, samp) {
  background: rgba(0, 0, 0, 0.06);
  color: #24292f;
}

.lk-body hr {
  border: 0;
  border-top: 1px solid var(--lk-panel-rule);
}

.lk-body a {
  color: var(--lk-link);
}

.lk-body a:hover {
  color: var(--lk-link-hover);
}

.lk-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-block: clamp(1rem, 3.5vw, 1.5rem);
}

/* -------------------------------------------------------- open/close motion */

/* `interpolate-size` lets `block-size: auto` animate. Engines without it get an
 * instant open, which is the correct fallback rather than a broken one. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

@supports selector(::details-content) {
  .lk-reveal::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.4s ease,
      content-visibility 0.4s ease allow-discrete;
  }

  .lk-reveal[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-reveal::details-content,
  .lk-toggle::before,
  .lk-toggle::after,
  .lk-linkbar {
    transition: none;
  }
}

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 26rem) {
  .lk-head {
    grid-template-columns: 36% 1fr;
  }
}