/*
 * Bridges between WordPress block markup and the ported styles (spec §9). Core block
 * CSS is not loaded (functions.php), so every block the content uses is styled here
 * or by a ported class it carries (rich-text__figure, rich-text__gallery, …).
 */

/* Figures have a 40px side margin by default; the Next.js site used divs. */
.rich-text__prose figure {
  margin-inline: 0;
}

.rich-text__embed .wp-block-embed__wrapper {
  height: 100%;
}

/*
 * --- Base layer: core blocks in the reading column that no section below styles ---
 *
 * Scoped to the prose column, so the home page's own blocks are untouched. The sections
 * below, and the series cards and resource links at the end, are more specific or later.
 */

/*
 * An image's alignment is a class on its figure, which core wraps in a div.wp-block-image
 * when the image is aligned (an unaligned one is the figure itself). Core's own CSS is not loaded.
 */
.rich-text__prose :is(.wp-block-image.alignleft, .wp-block-image .alignleft) {
  float: left;
  max-width: 50%;
  margin: var(--s-2) var(--s-5) var(--s-3) 0;
}

.rich-text__prose :is(.wp-block-image.alignright, .wp-block-image .alignright) {
  float: right;
  max-width: 50%;
  margin: var(--s-2) 0 var(--s-3) var(--s-5);
}

.rich-text__prose :is(.wp-block-image.aligncenter, .wp-block-image .aligncenter) {
  /* A table box would otherwise squeeze in beside a float above it. */
  clear: both;
  display: table;
  margin-inline: auto;
  text-align: center;
}

/* So the text after a floated image does not wrap into the next block. */
.rich-text__prose::after {
  content: '';
  display: block;
  clear: both;
}

.rich-text__prose .wp-block-columns {
  display: flex;
  gap: var(--s-5);
  margin-block: var(--s-5);
}

.rich-text__prose .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 40rem) {
  .rich-text__prose .wp-block-columns {
    flex-direction: column;
  }

  /* Beats the width a column carries as an inline style. */
  .rich-text__prose .wp-block-column {
    flex-basis: auto !important;
  }
}

.rich-text__prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block: var(--s-4);
}

.rich-text__prose .wp-block-button__link {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}

.rich-text__prose .wp-block-button__link:hover {
  background: var(--brand-hover);
  color: var(--brand-ink);
}

/* An ordinary Table block; the "Results" style below is its own look. */
.rich-text__prose .wp-block-table:not(.is-style-results) {
  margin: var(--s-5) 0;
  overflow-x: auto;
}

.rich-text__prose .wp-block-table:not(.is-style-results) table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.rich-text__prose .wp-block-table:not(.is-style-results) :is(th, td) {
  padding: var(--s-2) var(--s-3);
  border: var(--hairline) solid var(--rule-strong);
  text-align: left;
  vertical-align: baseline;
}

.rich-text__prose .wp-block-table:not(.is-style-results) th {
  background: var(--cream);
  font-weight: 600;
}

.rich-text__prose .wp-block-table:not(.is-style-results) figcaption {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/*
 * A page's notice is the first block of its content, so it sits inside the 68ch
 * reading column; on the Next.js site it spans the article. Measure the article.
 */
.views__article {
  container-type: inline-size;
}

.rich-text__prose > .views__notice:first-child {
  width: 100cqw;
}

/* --- The hero: a core Cover block with class rs-hero (port of Hero.module.css) --- */

.rs-hero-wrap {
  padding-top: var(--s-5);
}

.rs-hero {
  position: relative;
  /*
   * The Next.js frame takes its width from .shell; a Cover block has none, and with
   * aspect-ratio plus max-height the browser would size it from its height instead.
   */
  width: 100%;
  /* 16/9 across 78rem is nearly half the viewport; the cap keeps it a banner. */
  aspect-ratio: 16 / 9;
  max-height: 24rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.rs-hero .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
  border-radius: 0;
}

/* Rises from the bottom only, so no one's face is dimmed. */
.rs-hero .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(15 25 30 / 88%) 0%,
    rgb(15 25 30 / 55%) 26%,
    rgb(15 25 30 / 8%) 52%,
    transparent 72%
  );
}

.rs-hero .wp-block-cover__inner-container {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(1rem, 3.5vw, 2.75rem);
}

.rs-hero h1 {
  margin: 0;
  max-width: 22ch;
  color: #fff;
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 14px rgb(0 0 0 / 45%);
}

.rs-hero p {
  margin: var(--s-3) 0 0;
  max-width: 44ch;
  color: rgb(255 255 255 / 88%);
  font-size: var(--t-lead);
  text-shadow: 0 1px 12px rgb(0 0 0 / 45%);
}

.rs-hero .wp-block-buttons {
  margin-top: var(--s-4);
}

.rs-hero .wp-block-button__link {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.rs-hero .wp-block-button__link:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
}

@media (max-width: 40rem) {
  .rs-hero {
    /* A 16/9 strip is too shallow on a phone; give the photo more height. */
    aspect-ratio: 4 / 3;
  }
}

/* --- The "current" note: a core Group block with class rs-current (port of Current.module.css) --- */

.rs-current {
  margin-top: var(--s-7);
}

/*
 * In a classic theme WordPress wraps a Group's content in an inner container; let
 * its children lay out as if they were the Group's own, as Current.tsx renders them.
 */
.rs-current .wp-block-group__inner-container {
  display: contents;
}

.rs-current h2 {
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent);
  font-size: var(--t-h2);
  letter-spacing: -0.015em;
}

.rs-current__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--cream);
  border-radius: var(--radius-lg);
}

.rs-current__panel p {
  margin: 0;
  margin-inline-end: auto;
  max-width: 48ch;
  color: var(--ink-soft);
}

.rs-current .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  text-wrap: balance;
}

.rs-current .wp-block-button__link::after {
  content: '→';
}

.rs-current .wp-block-button__link:hover {
  background: var(--brand-hover);
  color: var(--brand-ink);
}

/* --- Results: core Table blocks in the "Results" style (port of ResultsTable.module.css) --- */

/* In the reading column, like the notice; on the Next.js site the results span the article. */
.rich-text__prose > .rs-results {
  width: 100cqw;
}

.rs-results {
  margin-block: var(--s-8);
}

/* Classic themes wrap every Group's content; the wrappers must not come between grid and tables. */
.rs-results .wp-block-group__inner-container {
  display: contents;
}

.rs-results__head {
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent);
  margin-bottom: var(--s-6);
}

/* A section title at the h2 size, not the reading column's smaller subheading. */
.rs-results .rs-results__title {
  margin: var(--s-2) 0 0;
  font-size: var(--t-h2);
}

.rs-results__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr));
}

/*
 * Core saves the caption as a <figcaption> after the table; the Next.js <caption> sits above it.
 * A table outside the grid has the margin of any other; the grid spaces its own tables.
 */
.wp-block-table.is-style-results {
  display: flex;
  flex-direction: column;
  margin: var(--s-5) 0;
}

.rs-results__grid .wp-block-table.is-style-results {
  margin: 0;
}

.is-style-results figcaption {
  order: -1;
  margin: 0;
  padding: var(--s-3);
  text-align: left;
  background: var(--cream);
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.is-style-results table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  background: var(--panel);
}

.is-style-results th {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: var(--hairline) solid var(--rule-strong);
}

.is-style-results td {
  padding: var(--s-3);
  border-bottom: var(--hairline) solid var(--rule);
  vertical-align: baseline;
}

.is-style-results tbody tr:last-child td {
  border-bottom: 0;
}

/* Core table cells carry no classes, so the columns go by position: place, robot, team. */
.is-style-results :is(th, td):first-child {
  width: 3.25rem;
}

.is-style-results td:first-child {
  font-family: var(--font-mono);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink-faint);
}

/* Gold is reserved for first place; it is not a general accent. Classes from inc/results.php. */
.is-style-results td.rs-place-1 {
  color: var(--gold);
}

.is-style-results td.rs-place-2 {
  color: var(--silver);
}

.is-style-results td.rs-place-3 {
  color: var(--bronze);
}

.is-style-results td:nth-child(2) {
  font-weight: 600;
  color: var(--ink);
}

.is-style-results td:nth-child(3) {
  color: var(--ink-soft);
}

/* The competitor, on its own smaller line under the team. */
.is-style-results td:nth-child(3) small {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

/* --- Sheets: [robotuskola_sheet] from the robotuskola-core plugin (port of SheetTables.module.css) --- */

/* In the reading column, like the results; on the Next.js site the sheets sit outside the prose. */
.rich-text__prose > .rs-sheet {
  width: 100cqw;
}

.rs-sheet {
  margin-block: var(--s-6) var(--s-8);
}

/* Beats the prose column's own h2 and h3 spacing. */
.rs-sheet .rs-sheet__label {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent);
  font-size: var(--t-h2);
}

.rs-sheet__block {
  margin-bottom: var(--s-6);
}

.rs-sheet .rs-sheet__heading {
  margin: 0 0 var(--s-2);
  font-size: var(--t-h3);
  color: var(--ink);
}

/* Standings are wide; they scroll inside themselves rather than the page. */
.rs-sheet__scroll {
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
}

.rs-sheet__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  background: var(--panel);
}

.rs-sheet__table th {
  position: sticky;
  top: 0;
  padding: var(--s-3);
  text-align: left;
  vertical-align: bottom;
  background: var(--cream);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--rule-strong);
  white-space: nowrap;
}

.rs-sheet__table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--hairline) solid var(--rule);
  vertical-align: baseline;
}

.rs-sheet__table tbody tr:last-child td {
  border-bottom: 0;
}

.rs-sheet__table tbody tr:hover td {
  background: var(--accent-subtle);
}

/* The first column is the robot or discipline: the row's identity. */
.rs-sheet__table td:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.rs-sheet .rs-sheet__stale {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* Google's own rendering, used where the merged header defeats a flat table. */
.rs-sheet__embed {
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

/* Taller than the first port's fixed 32rem: standings are long, and a short box hid most of them. */
.rs-sheet__embed iframe {
  display: block;
  width: 100%;
  height: clamp(32rem, 80vh, 56rem);
  border: 0;
}

/* The embed is a small window on a wide table; this link opens the table on a page of its own. */
.rs-sheet .rs-sheet__open {
  margin: 0 0 var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
}

.rs-sheet .rs-sheet__open a {
  display: inline-block;
  padding-block: var(--s-2);
}

.rs-sheet .rs-sheet__open a::after {
  content: ' ↗';
}

/* --- Timeline: [robotuskola_timeline] from the robotuskola-core plugin (port of Timeline.module.css) --- */

/* The timeline spans the article, as on the Next.js page, not the reading column. */
.rich-text__prose > .rs-timeline {
  width: 100cqw;
}

.rs-timeline {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
}

.rs-timeline__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: var(--s-4);
}

/* The year sits across both columns, breaking the run into readable seasons. */
.rs-timeline__year {
  grid-column: 1 / -1;
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rs-timeline__item:first-child .rs-timeline__year {
  margin-top: 0;
}

.rs-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
}

/* One continuous line down the rail, drawn behind the dots. */
.rs-timeline__rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rule-strong);
}

.rs-timeline__item:last-child .rs-timeline__rail::before {
  bottom: auto;
  height: 1.4rem;
}

.rs-timeline__dot {
  position: relative;
  margin-top: 0.85rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--paper);
}

.rs-timeline__card {
  padding: var(--s-4) 0 var(--s-6);
  min-width: 0;
}

.rs-timeline .rs-timeline__month {
  margin: 0 0 var(--s-1);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Beats the reading column's own h3 spacing and size. */
.rs-timeline .rs-timeline__title {
  margin: 0 0 var(--s-2);
  font-size: var(--t-h3);
}

.rs-timeline__title a {
  color: var(--ink);
  text-decoration: none;
}

.rs-timeline__title a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/*
 * Entry bodies are terse podium lines ("Mini Sumo: 1.vieta BOLT"), so they read better
 * tightened up than as full paragraphs.
 */
.rs-timeline__body p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (max-width: 40rem) {
  .rs-timeline__item {
    grid-template-columns: 1.5rem 1fr;
    column-gap: var(--s-3);
  }
}

/* --- Competition index: [robotuskola_competitions] (port of CompetitionIndex.module.css) --- */

/* Spans the article, as on the Next.js page, not the reading column. */
.rich-text__prose > .rs-competitions {
  width: 100cqw;
}

.rs-competitions {
  margin-top: var(--s-7);
}

/* Beats the reading column's own h2. */
.rs-competitions .rs-competitions__title {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent);
  font-size: var(--t-h2);
}

.rs-competitions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-competitions__row + .rs-competitions__row {
  border-top: var(--hairline) solid var(--rule);
}

/* Beats the reading column's own link colour. */
.rs-competitions .rs-competitions__link {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}

.rs-competitions .rs-competitions__link:hover {
  background: var(--accent-subtle);
  color: var(--ink);
}

.rs-competitions__year {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
}

.rs-competitions__name {
  font-weight: 600;
}

.rs-competitions__link:hover .rs-competitions__name {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.rs-competitions__place {
  font-weight: 400;
  color: var(--ink-soft);
}

@media (max-width: 34rem) {
  .rs-competitions .rs-competitions__link {
    grid-template-columns: 3.5rem 1fr;
  }
}

/*
 * --- Series cards and resource links: core Buttons blocks in two block styles ---
 * (port of SeriesCards.module.css and ResourceLinks.module.css; inc/links.php registers the styles)
 */

/* Both span the article, as on the Next.js page, not the reading column. */
.rich-text__prose .wp-block-buttons:is(.is-style-series-cards, .is-style-resource-links) {
  display: grid;
  width: 100cqw;
  margin-block: var(--s-6) 0;
}

/* The Button's own wrapper gives way, so each link is a cell of the grid. */
:is(.is-style-series-cards, .is-style-resource-links) .wp-block-button {
  display: contents;
}

.rich-text__prose .is-style-series-cards {
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.rich-text__prose .is-style-series-cards .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  min-height: 7rem;
  background: var(--panel);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-lg);
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.rich-text__prose .is-style-series-cards .wp-block-button__link:hover {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: var(--ink);
}

/* The title is bold; the arrow, as in SeriesCards.tsx, is not. */
.is-style-series-cards .wp-block-button__link::after {
  content: '→';
  flex: none;
  color: var(--accent);
  font-weight: 400;
}

/* The heading is optional; the buttons have the gap above them either way. */
.rich-text__prose > .rs-links__heading {
  width: 100cqw;
  margin: var(--s-7) 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent);
  font-size: var(--t-h2);
}

.rich-text__prose .is-style-resource-links {
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.rich-text__prose .wp-block-buttons.is-style-resource-links {
  margin-top: var(--s-7);
}

.rich-text__prose .rs-links__heading + .wp-block-buttons.is-style-resource-links {
  margin-top: 0;
}

.rich-text__prose .is-style-resource-links .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--panel);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 600;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.rich-text__prose .is-style-resource-links .wp-block-button__link:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--ink);
  transform: translateY(-1px);
}

/* The document icon, drawn as a mask so it takes the accent colour. */
.is-style-resource-links .wp-block-button__link::before {
  content: '';
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--accent-hover);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5h6.5L16 7v10.5H5z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M11.5 2.5V7H16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.is-style-resource-links .wp-block-button__link::after {
  content: '→';
  flex: none;
  margin-inline-start: auto;
  color: var(--accent-hover);
}

/* --- The footer's contact is a widget area: its block widget is a paragraph --- */

.footer__links p {
  margin: 0;
}

/* --- YouTube: the privacy-enhanced iframe from the plugin (class Embeds) --- */

/* In the YouTube block the figure sets the box; a video address alone in a paragraph has none. */
.rs-youtube {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius);
}