/* ============================================================
   Newspaper Movie Guide — B&W newspaper aesthetic
   ============================================================ */

:root {
  --ink: #302f2c;
  --paper: #f3f0e7;
  --accent: var(--ink);
  --border: 1px solid var(--ink);
  --border-heavy: 4px double var(--ink);
  --font-serif: 'Times New Roman', Times, Georgia, serif;
  --font-condensed: 'Barlow Condensed', Impact, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: #888;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  padding: 24px;
}

/* ── Page Header ───────────────────────────────────────────── */

.page-header {
  text-align: center;
  border-top: var(--border-heavy);
  border-bottom: var(--border-heavy);
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
}

.page-header p {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #444;
}

/* ── Footer / Masthead ─────────────────────────────────────── */

footer {
  text-align: center;
  border-top: var(--border-heavy);
  border-bottom: var(--border-heavy);
  padding: 0.75rem 0;
}

footer h1 {
  font-family: var(--font-condensed);
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

footer a {
  color: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* ── Movie Grid ───────────────────────────────────────────── */

.movie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 6px;
  margin-bottom: 2rem;
}

[data-size='hero'] {
  grid-column: span 4;
  grid-row: span 2;
}
[data-size='poster'] {
  grid-column: span 2;
  grid-row: span 4;
}
[data-size='large'] {
  grid-column: span 2;
  grid-row: span 2;
}
[data-size='medium'] {
  grid-column: span 2;
  grid-row: span 1;
}
[data-size='small'] {
  grid-column: span 1;
  grid-row: span 1;
}
[data-size='mini-poster'] {
  grid-column: span 1;
  grid-row: span 2;
}

/* ── Movie Card ───────────────────────────────────────────── */

.movie-card {
  /* Per-card theme. Network/list-sourced cards swap these below. */
  --card-bg: var(--paper);
  --card-ink: var(--ink);
  --card-accent: var(--accent);

  color: var(--card-ink);
  border: 1px solid var(--card-ink);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 6px;
  mix-blend-mode: multiply;
}

.movie-card[data-source='network'],
.movie-card[data-source='list'] {
  --card-bg: var(--ink);
  --card-ink: var(--paper);
  --card-accent: var(--paper);
  background: var(--card-bg);
  /* mix-blend-mode against dark = muddy; show solid colors instead */
  mix-blend-mode: normal;
}

.movie-card .poster-wrap {
  width: 100%;
  min-height: 0;
  flex: 1;
  display: block;
  overflow: hidden;
}

.movie-card .poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.1);
}

/* On dark cards, give the image its own paper backdrop and multiply blend.
   isolation creates a stacking context so multiply blends only against the
   wrapper's paper background, not the card's ink fill below. */
.movie-card[data-source='network'] .poster-wrap,
.movie-card[data-source='list'] .poster-wrap {
  background: var(--paper);
  isolation: isolate;
}

.movie-card[data-source='network'] .poster,
.movie-card[data-source='list'] .poster {
  mix-blend-mode: multiply;
}

/* Hero card: image left, text right */
.hero-card {
  flex-direction: row;
  border: var(--border-heavy);
}

.hero-card .poster-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

.hero-card .card-body {
  margin-left: 50%;
  justify-content: center;
}

[data-size='large'] .card-body,
[data-size='hero'] .card-body {
  align-items: center;
  text-align: center;
  padding: 1.5rem;
}

[data-size='medium'] .card-body,
[data-size='small'] .card-body {
  height: 100%;
}

.movie-card .card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
}

.movie-card .title {
  font-family: var(--font-condensed);
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

[data-size='hero'] .title {
  font-size: 3.8rem;
}
[data-size='large'] .title {
  font-size: 2.8rem;
}
[data-size='medium'] .title {
  font-size: 2.8rem;
  text-transform: uppercase;
}

/* Script/handwriting faces lose legibility uppercased — keep their casing. */
.movie-card .title[data-font-category='cursive'] {
  text-transform: none;
}

[data-size='mini-poster'] .title {
  font-size: 1.8rem;
  width: 90%;
}

[data-size='small'] .title {
  text-transform: uppercase;
  font-size: 1.4rem;
  width: 90%;
}

.movie-card .year {
  font-size: 0.8rem;
  color: var(--card-ink);
  letter-spacing: 0.1em;
}

.movie-card .tagline {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--card-ink);
  margin-top: 0.2rem;
  line-height: 1;
  text-wrap: balance;
}

[data-size='small'] .tagline {
  display: none;
}

.movie-card .rating {
  color: var(--card-accent);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

[data-size='hero'] .rating {
  font-size: 2rem;
}
[data-size='large'] .rating {
  font-size: 1rem;
}

.movie-card .services {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: auto;
}

.poster-card .poster-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.poster-card .poster-meta .services {
  margin-top: 0;
}

.hero-card .services {
  margin-top: 1.5rem;
}

.movie-card .services li {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--card-ink);
  padding: 0.2rem 0.3rem;
  line-height: 1.15em;
  border-radius: 3px;
}

/* ── Card Interactivity ────────────────────────────────────── */

/* Flip */
.movie-card {
  perspective: 1000px;
}

.movie-card .poster,
.movie-card .card-body,
.movie-card .card-actions {
  transition: opacity 0.3s;
}

.movie-card .card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background: var(--card-bg);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--card-ink);
  border-bottom: 1px solid var(--card-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.movie-card .card-back .review-snippet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--card-ink);
  text-align: center;
  max-width: 80%;
}

[data-flipped='true'] .poster,
[data-flipped='true'] .card-body {
  opacity: 0;
}

[data-flipped='true'] .card-back {
  opacity: 1;
  pointer-events: auto;
}

/* Circled — blue ballpoint pen circle around title */
[data-circled='true'] .title {
  position: relative;
  width: fit-content;
}

[data-circled='true'] .title::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2.5px solid #ff173e;
  border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
  transform: rotate(-2deg);
  pointer-events: none;
  opacity: 0.7;
}

/* Watched — ballpoint pen X over title */
[data-watched='true'] .title {
  position: relative;
  width: fit-content;
}

[data-watched='true'] .title::before,
[data-watched='true'] .title::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-top: 2.5px solid #ff173e;
  opacity: 0.7;
  pointer-events: none;
}

[data-watched='true'] .title::before {
  transform: rotate(-12deg);
  top: 50%;
}

[data-watched='true'] .title::after {
  transform: rotate(8deg);
  top: 50%;
}

/* ── Card Actions Overlay ─────────────────────────────────── */

/* Full-card invisible layer; child icons sit on top. */
.card-actions-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Card-wide click target for circle toggle. */
.card-circle-zone {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
}

/* Small icon affordances pinned to the card corners.
   Each icon sits inside a small paper-colored chip so it stays visible
   over images, dark cards, etc. Hidden until the user hovers (or focuses
   into) the card to keep the layout uncluttered. */
.card-icon-btn {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--card-ink);
  font-family: var(--font-condensed);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  border-radius: 3px;
  transition: opacity 0.15s;
}

.movie-card:hover .card-icon-btn,
.movie-card:focus-within .card-icon-btn {
  opacity: 0.9;
  pointer-events: auto;
}

.card-icon-btn:hover,
.card-icon-btn:focus-visible {
  opacity: 1;
}

.flip-btn {
  top: 0.35rem;
  right: 0.35rem;
  font-size: 1rem;
  padding-bottom: 0.3rem;
}

/* Keep the flip button visible while the card is flipped so the user
   can flip back without re-hovering. */
.flip-btn[aria-pressed='true'] {
  opacity: 1;
  pointer-events: auto;
}

/* Touch devices have no hover — keep the affordances visible. */
@media (hover: none) {
  .card-icon-btn {
    opacity: 0.9;
    pointer-events: auto;
  }
}

.watched-btn {
  bottom: 0.35rem;
  right: 0.35rem;
}

.watched-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.watched-box {
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 2px;
}

.watched-btn input:checked + .watched-box {
  background: currentColor;
}

/* ── Bottom Section (Theaters + Right Column side by side) ─── */

.bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: var(--border-heavy);
  margin-top: 1.5rem;
}

/* ── Theaters ─────────────────────────────────────────────── */

.theaters {
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-right: var(--border);
}

.theaters-header {
  font-family: var(--font-condensed);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  border-bottom: var(--border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
}

.theaters-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 15px;
}

.theaters-col {
  border-right: var(--border);
}

.theaters-col:last-child {
  border-right: none;
  padding-left: 15px;
}

.theater-column {
  padding: 0 0 1rem;
}

.theater-name {
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--ink);
  color: var(--paper);
  padding: 0.15rem 0.4rem;
  margin-bottom: 0.4rem;
}

.theater-movies {
  list-style: none;
}

.theater-movies li {
  font-size: 0.9rem;
  padding: 0.15rem 0;
  border-bottom: 1px dotted #aaa;
}

.theater-movies li.recommended {
  font-weight: bold;
}

/* ── Right Column (Coming Soon + Vault) ───────────────────── */

.right-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0.75rem 0 0.75rem 0.75rem;
}

/* ── Coming Soon ──────────────────────────────────────────── */

.right-column-left {
  padding-right: 0.75rem;
  border-right: var(--border);
}

.right-column-right {
  padding-left: 0.75rem;
}

.right-column-right > section + section {
  margin-top: 1rem;
}

.coming-soon {
}

.coming-soon-header {
  font-family: var(--font-condensed);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  border-bottom: var(--border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
}

.coming-soon-list {
  list-style: none;
}

.coming-soon-list li {
  font-size: 0.9rem;
  padding: 0.15rem 0;
  border-bottom: 1px dotted #aaa;
  break-inside: avoid;
}

.coming-soon-title {
  font-weight: bold;
}
.critic-rating {
  color: var(--ink);
}

.critic-quote {
  font-style: italic;
  margin: 0.2rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.streaming-links {
  font-family: var(--font-condensed);
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0.1rem 0 0;
  color: var(--ink);
}

.streaming-link {
  color: inherit;
  text-decoration: none;
}

.streaming-link:hover {
  text-decoration: underline;
}

[data-circle-title] {
  cursor: pointer;
  font-weight: bold;
}

/* ── The Vault ─────────────────────────────────────────────── */

.vault {
}

.vault-header {
  font-family: var(--font-condensed);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  border-bottom: var(--border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
}

.vault-list {
  list-style: none;
}

.vault-list li {
  font-size: 0.9rem;
  padding: 0.15rem 0;
  border-bottom: 1px dotted #aaa;
  break-inside: avoid;
}

.vault-title {
  font-weight: bold;
}
.vault-date {
  font-size: 0.7rem;
  color: var(--ink);
}
.vault-rating {
  color: var(--ink);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 799px) {
  [data-size='hero'],
  [data-size='large'] {
    grid-column: span 2;
    grid-row: span 2;
  }
  [data-size='poster'] {
    grid-column: span 1;
    grid-row: span 2;
  }
  [data-size='medium'] {
    grid-column: span 2;
    grid-row: span 1;
  }
  [data-size='small'] {
    grid-column: span 1;
    grid-row: span 1;
  }

  .bottom-section {
    grid-template-columns: 1fr;
  }

  .theaters {
    border-right: none;
    border-bottom: var(--border);
    padding: 0.75rem 0;
  }

  .right-column {
    grid-template-columns: 1fr;
    padding: 0.75rem 0;
  }

  .coming-soon {
    border-right: none;
    border-bottom: var(--border);
    padding: 0 0 0.75rem;
  }

  .vault {
    padding: 0.75rem 0 0;
  }
}

@media (min-width: 800px) {
  .movie-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1000px) {
  .movie-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1230px) {
  .movie-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}