/**
 * Letterboxd + article-footer styling. Shared by the post footer
 * (template-parts/post/article-footer.php, on the light post page) and,
 * with dark overrides in css/pages/author.css, the author page.
 *
 * Written against the design tokens in css/base/variables.css.
 */

:root {
  --lb-green: #00b020;
  --lb-star-off: #cdc2ac;
  /* Soft, full-bodied 5-star shape (Letterboxd-style) used as a mask so
     both the display meter and the input render the same rounded star. */
  --lb-star5: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2020%22%3E%3Cpath%20d%3D%22M%2010.00%201.00%20L%2012.88%206.04%20L%2018.56%207.22%20L%2014.66%2011.51%20L%2015.29%2017.28%20L%2010.00%2014.90%20L%204.71%2017.28%20L%205.34%2011.51%20L%201.44%207.22%20L%207.12%206.04%20Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M%2030.00%201.00%20L%2032.88%206.04%20L%2038.56%207.22%20L%2034.66%2011.51%20L%2035.29%2017.28%20L%2030.00%2014.90%20L%2024.71%2017.28%20L%2025.34%2011.51%20L%2021.44%207.22%20L%2027.12%206.04%20Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M%2050.00%201.00%20L%2052.88%206.04%20L%2058.56%207.22%20L%2054.66%2011.51%20L%2055.29%2017.28%20L%2050.00%2014.90%20L%2044.71%2017.28%20L%2045.34%2011.51%20L%2041.44%207.22%20L%2047.12%206.04%20Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M%2070.00%201.00%20L%2072.88%206.04%20L%2078.56%207.22%20L%2074.66%2011.51%20L%2075.29%2017.28%20L%2070.00%2014.90%20L%2064.71%2017.28%20L%2065.34%2011.51%20L%2061.44%207.22%20L%2067.12%206.04%20Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M%2090.00%201.00%20L%2092.88%206.04%20L%2098.56%207.22%20L%2094.66%2011.51%20L%2095.29%2017.28%20L%2090.00%2014.90%20L%2084.71%2017.28%20L%2085.34%2011.51%20L%2081.44%207.22%20L%2087.12%206.04%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

/* ---- logo ---- */
.lb-logo { height: 23px; width: auto; display: block; flex: none; }

/* ---- stars (display, half-star aware via --pct) ---- */
.lb-stars {
  --pct: 100%;
  position: relative; display: inline-block; vertical-align: middle;
  width: 82px; height: 16px;
}
.lb-stars::before {
  content: ""; position: absolute; inset: 0; background: var(--lb-star-off);
  -webkit-mask: var(--lb-star5) 0 / 82px 16px no-repeat; mask: var(--lb-star5) 0 / 82px 16px no-repeat;
}
.lb-stars__on {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--pct); background: var(--lb-green);
  -webkit-mask: var(--lb-star5) 0 / 82px 16px no-repeat; mask: var(--lb-star5) 0 / 82px 16px no-repeat;
}

/* ---- article footer shell ---- */
.article-footer {
  display: flex; flex-direction: column; gap: var(--space-6);
  margin: var(--space-12) 0 var(--space-8);
}

/* ---- Letterboxd panel ---- */
.lb-panel {
  background: var(--color-white); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.4);
}
.lb-panel__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6); background: var(--color-off-black); color: #f4ede0;
  flex-wrap: wrap;
}
.lb-panel__t { font-weight: 800; font-size: 1rem; }
.lb-panel__s { font-size: 12px; color: #b7ab97; }
.lb-panel__match {
  margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--lb-green); background: rgba(0, 176, 32, 0.14); border: 1px solid rgba(0, 176, 32, 0.4);
  padding: 4px 11px; border-radius: 999px;
}
.lb-panel__body { padding: var(--space-6); }

.lb-consensus { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center; }
.lb-consensus__badge {
  width: 104px; height: 104px; border-radius: 50%; background: var(--lb-green); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4); transform: rotate(-3deg); flex: none; margin: 0 auto;
}
.lb-consensus__badge .num { font-size: 2.2rem; font-weight: 900; line-height: 1; }
.lb-consensus__badge .of { font-size: 12px; opacity: 0.9; }
.lb-consensus__badge .cap { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-top: 3px; }
.lb-consensus__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.lb-rater { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; }
.lb-rater__ava { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.lb-rater__name { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.lb-rater__row { display: flex; align-items: center; gap: 7px; }
.lb-rater__num { font-size: 11px; color: var(--color-text-faint); font-weight: 600; }

.lb-reviews-h {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-3);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint);
}
.lb-reviews-h::after { content: ""; flex: 1; height: 1px; background: var(--color-border-light); }

/* ---- reviews carousel ---- */
.rev-carousel { position: relative; padding: 0 40px; }
.rev-track {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 2px 2px 6px; scrollbar-width: none; -ms-overflow-style: none;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-nav {
  position: absolute; top: calc(50% - 5px); transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-text); font-size: 19px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.rev-nav:hover { color: var(--color-accent); }
.rev-nav.prev { left: 0; } .rev-nav.next { right: 0; }
.rev {
  flex: 0 0 286px; scroll-snap-align: start; display: block; text-decoration: none; color: inherit;
  background: var(--color-bg-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
  padding: 15px 16px; transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.rev:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.35); }
.rev__top { display: flex; align-items: center; gap: 9px; }
.rev__ava { width: 28px; height: 28px; border-radius: 50%; flex: none; }
/* No explicit color here inherited the dark single-post page's white
   text straight through the white .rev card — nearly invisible. */
.rev__who { font-size: 12px; font-weight: 700; color: var(--color-text); }
.rev__when { font-size: 11px; color: var(--color-text-faint); }
.rev__stars { margin-left: auto; }
.rev__text { font-size: 13.2px; color: var(--color-text-muted); margin-top: 10px; line-height: 1.5; }
.rev__link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 11px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lb-green);
}
@media (max-width: 640px) { .rev { flex: 0 0 84%; } }

/* ---- reader rating (sidebar module, dark) — resubmittable ---- */
.rt-rate {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md); padding: var(--space-6); color: #fff;
}
.rt-rate__title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72); margin: 0 0 var(--space-4); }
.rt-rate__stars { position: relative; width: 150px; height: 30px; cursor: pointer; margin-bottom: var(--space-4); }
.rt-rate__stars:focus-visible { outline: 2px solid var(--lb-green); outline-offset: 4px; border-radius: 3px; }
.rt-rate__off, .rt-rate__on {
  position: absolute; left: 0; top: 0; height: 100%; pointer-events: none;
  -webkit-mask: var(--lb-star5) 0 / 150px 30px no-repeat; mask: var(--lb-star5) 0 / 150px 30px no-repeat;
}
.rt-rate__off { width: 100%; background: rgba(255, 255, 255, 0.24); }
.rt-rate__on { width: 0; background: var(--lb-green); transition: width 0.08s ease; }
.rt-rate__hit { position: absolute; top: 0; height: 100%; width: 10%; }
.rt-rate__meta { margin-top: var(--space-3); font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.rt-rate__meta b { color: #fff; font-weight: 700; }

/* ---- more-from / related: horizontal rows of 3 that scroll ----
   Nav arrows live in the head row next to the title (not flanking the
   track) so the card row itself runs the full content width instead of
   getting squeezed in by 40px of side padding for absolutely-positioned
   buttons. */
.rt-foot-row { }
.rt-foot-carousel { }
.rt-foot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.rt-foot-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); }
.rt-foot-nav-group { display: flex; gap: var(--space-2); flex: none; }
.rt-foot-track {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2); scrollbar-width: none; -ms-overflow-style: none;
}
.rt-foot-track::-webkit-scrollbar { display: none; }
.rt-foot-nav {
  position: static; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-text); font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.rt-foot-nav:hover { color: var(--color-accent); }

/* Card content splits top/bottom: category + title anchor to the top,
   the coverage date always sits flush along the bottom — consistent
   regardless of how many lines the title wraps to (was vertically
   centered as one block, which put the date at a different height on
   every card). */
.rt-foot-mini {
  flex: 0 0 calc(33.333% - (var(--space-4) * 2 / 3)); scroll-snap-align: start;
  display: flex; gap: 11px; text-decoration: none; color: inherit;
  background: var(--color-bg-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
  padding: 11px; transition: transform 0.12s ease; min-height: 84px;
}
.rt-foot-mini:hover { transform: translateY(-2px); }
.rt-foot-mini__img { width: 52px; height: 52px; border-radius: var(--radius-sm); flex: none; background-size: cover; background-position: center; }
.rt-foot-mini__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); min-width: 0; flex: 1; }
.rt-foot-mini__top { display: flex; flex-direction: column; gap: 2px; }
.rt-foot-mini__k { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.rt-foot-mini__t { font-size: 12.6px; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.rt-foot-mini__date { font-size: 10.5px; color: var(--color-text-faint); font-weight: 600; }
/* ---- comment invite — links down to the real comment form ---- */
.rt-comment-prompt {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-6);
  text-decoration: none; color: #fff; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.rt-comment-prompt:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.07); }
.rt-comment-prompt__q { font-weight: 700; font-size: 1rem; }
.rt-comment-prompt__btn {
  margin-left: auto; flex: none; background: var(--color-accent); color: #fff; border-radius: 999px;
  padding: 10px 22px; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .lb-consensus { grid-template-columns: 1fr; }
  .rt-foot-mini { flex-basis: 82%; }
  .rt-comment-prompt { flex-direction: column; align-items: flex-start; }
  .rt-comment-prompt__btn { margin-left: 0; }
  .rev-carousel { padding: 0 32px; }
  .rev-nav { width: 30px; height: 30px; font-size: 16px; }
}