/* ==========================================================================
   News: home page section, news archive and article pages
   ========================================================================== */

.news {
  background:
    radial-gradient(35% 45% at 0% 95%, rgba(252, 214, 214, 0.6), transparent 70%),
    radial-gradient(35% 40% at 100% 70%, rgba(222, 232, 248, 0.6), transparent 70%);
}

.news .section-head {
  margin-bottom: 56px;
}

.news-grid {
  display: grid;
  grid-template-columns: minmax(0, 596fr) minmax(0, 650fr);
  gap: 32px;
  max-width: 1280px;
  margin-inline: auto;
}

.news-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
  font-size: 1.125rem;
  color: var(--c-muted);
}

/* "View All" sits on the heading row, right-aligned with the grid. */
.news__head {
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
}

.news__more {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 600px) {
  .news__more {
    position: static;
    transform: none;
  }
}

/* Shared card behaviour */
.news-feature,
.news-item,
.news-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.news-feature:hover,
.news-item:hover,
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* --tx, --ty and --zoom come from how the picture was placed in the news
   editor (inline style on the <img>); the frame's inline background fills any
   space left when it was zoomed out. */
.news-feature .media > img,
.news-item .media > img,
.news-card .media > img,
.article__media > img,
.article__figure > img,
.article__gallery-item > img {
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--zoom, 1) * var(--cover, 1)));
}

/* media.js sets --cover once the picture's shape is known: the whole picture is
   shown, scaled so 100% fills the frame, and zooming out reveals the rest. */
.media > img.is-placed {
  object-fit: contain;
}

.news-feature .media > img,
.news-item .media > img,
.news-card .media > img {
  transition: transform 0.8s var(--ease), opacity 0.5s;
}

.news-feature:hover .media > img,
.news-item:hover .media > img,
.news-card:hover .media > img {
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--zoom, 1) * var(--cover, 1) * 1.04));
}

.news-feature h3 a:hover,
.news-item h3 a:hover,
.news-card h2 a:hover {
  color: var(--c-violet);
}

/* --- Lead story --------------------------------------------------------- */

.news-feature {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.news-feature__media {
  position: relative;
  display: block;
}

/* Same 16:10 frame as the cover picker in the news editor. */
.news-feature__media .media {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
}

/* Date sits on a white tab cut into the bottom-left of the image. */
.news-feature__date {
  position: absolute;
  left: 0;
  bottom: -1px;
  min-width: 180px;
  padding: 10px 52px 4px 14px;
  background: var(--c-surface);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 100%, 0 100%);
  border-top-right-radius: 6px;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--c-subtle);
}

.news-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 24px 12px 8px;
}

.news-feature__title {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.1;
}

.news-feature__excerpt {
  margin-top: 14px;
  margin-bottom: 24px;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--c-muted);
}

.news-feature .btn {
  margin-top: auto;
}

/* --- Side list ---------------------------------------------------------- */

.news-list {
  display: grid;
  gap: 16px;
  align-content: start;
}

.news-item {
  display: grid;
  grid-template-columns: minmax(0, 230fr) minmax(0, 300fr);
  gap: 24px;
  align-items: center;
  padding: 18px 26px 18px 18px;
}

.news-item__media .media {
  aspect-ratio: 286 / 167;
  border-radius: 10px;
}

.news-item__date {
  display: block;
  font-size: 0.6875rem;
  color: var(--c-subtle);
}

.news-item__title {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.1;
}

.news-item__excerpt {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item .btn {
  margin-top: 12px;
}

@media (max-width: 1000px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .news-feature {
    padding: 16px;
  }

  .news-feature__body {
    padding: 28px 4px 8px;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
}

/* --- News archive ------------------------------------------------------- */

.page-hero {
  padding-top: 24px;
}

.page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.news-filter input {
  flex: 1 1 280px;
  max-width: 440px;
}

.news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 28px;
}

.news-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.news-card__media .media {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 20px 8px 8px;
}

.news-card__date {
  font-size: 0.875rem;
  color: var(--c-subtle);
}

.news-card__title {
  margin-top: 10px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.news-card__excerpt {
  margin: 10px 0 20px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--c-muted);
}

.news-card .btn {
  margin-top: auto;
}

/* --- Article ------------------------------------------------------------ */

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--c-muted);
  transition: color 0.2s, gap 0.3s var(--ease);
}

.link-back .icon {
  width: 18px;
  height: 18px;
}

.link-back:hover {
  color: var(--c-ink);
  gap: 12px;
}

.article__head {
  margin-top: 40px;
}

.article__date {
  font-size: 1rem;
  color: var(--c-subtle);
}

/* Fills the text column instead of balancing into short lines. */
.article__title {
  margin-top: 12px;
  text-wrap: pretty;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
}

.article__lead {
  margin-top: 24px;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--c-ink-soft);
}

/* Same 16:10 frame as the cover in the news editor, so the picture sits
   exactly where it was placed there. Kept to the text column and to just over
   half the screen height so it never fills the whole view. */
.article__media {
  max-width: calc(55vh * 16 / 10);
  margin-top: 40px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
}

.article__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin-top: 40px;
}

/* Same 4:3 frame as the gallery pictures in the news editor. */
.article__gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

@media (max-width: 600px) {
  .article__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .article__gallery-item {
    border-radius: 12px;
  }
}

.article__body {
  margin-top: 48px;
}

/* A picture placed between paragraphs with [picture N]. Same 4:3 frame as
   the gallery pictures in the news editor, so it shows as placed there. */
.prose > .article__figure {
  margin-block: 2em;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

.prose > .article__figure + * {
  margin-top: 0;
}

.prose {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.prose > * + * {
  margin-top: 1.2em;
}

.prose h2,
.prose h3 {
  margin-top: 1.8em;
  color: var(--c-ink);
}

.prose h2 {
  font-size: 1.75rem;
}

.prose h3 {
  font-size: 1.375rem;
}

.prose a {
  color: var(--c-violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose ul {
  padding-left: 1.2em;
  list-style: disc;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose blockquote {
  padding-left: 20px;
  border-left: 3px solid var(--c-violet);
  font-style: italic;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 1rem;
  color: var(--c-subtle);
}

/* --- Article blocks (written in the block editor) ----------------------- */

.prose h4 {
  margin-top: 1.6em;
  font-size: 1.125rem;
  color: var(--c-ink);
}

.prose ol {
  padding-left: 1.4em;
  list-style: decimal;
}

.prose li > ul,
.prose li > ol {
  margin-top: 0.4em;
}

.prose mark {
  padding: 0 0.12em;
  border-radius: 3px;
  background: linear-gradient(transparent 35%, rgba(122, 76, 255, 0.22) 35%);
  color: inherit;
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: rgba(16, 16, 32, 0.06);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.88em;
}

.prose blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.95em;
  font-style: normal;
  color: var(--c-muted);
}

.prose blockquote cite::before {
  content: '— ';
}

.prose hr {
  height: 0;
  margin-block: 2.6em;
  border: 0;
  text-align: center;
}

.prose hr::before {
  content: '• • •';
  letter-spacing: 0.6em;
  color: var(--c-subtle);
}

.prose .checklist {
  padding-left: 0;
  list-style: none;
}

.prose .checklist li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.7em;
}

.prose .checklist li > .checklist {
  flex-basis: 100%;
  padding-left: 1.6em;
}

.checklist__box {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.33em;
  border: 2px solid var(--c-subtle);
  border-radius: 5px;
}

.checklist__box.is-checked {
  border-color: var(--c-violet);
  background: var(--c-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat;
}

/* Pictures, galleries and videos get more room above and below than text. */
.prose > figure {
  margin-block: 2.4em;
}

.prose > figure + * {
  margin-top: 0;
}

.prose figcaption {
  margin-top: 0.75em;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* Tall (portrait) pictures are kept within the screen and centred. */
.article-figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  cursor: zoom-in;
}

.article-figure--wide img {
  width: 100%;
  object-fit: cover;
}

/* Wide pictures break out of the text column; full ones span the window. */
.article-figure--wide {
  --half: min(560px, 50vw - var(--gutter));
  width: calc(var(--half) * 2);
  margin-left: calc(50% - var(--half));
}

.article-figure--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.article-figure--full img {
  width: 100%;
  max-height: 85vh;
  object-fit: cover;
  border-radius: 0;
}

.article-figure--full figcaption {
  padding-inline: var(--gutter);
  text-align: center;
}

.article-figure--small {
  width: min(100%, 420px);
  margin-inline: auto;
}

.article-figure--small figcaption {
  text-align: center;
}

.article-gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 10px;
}

.article-gallery--2 { --cols: 2; }
.article-gallery--4 { --cols: 4; }

.article-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.article-gallery__item img:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.article-gallery__caption {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--c-muted);
}

@media (max-width: 600px) {
  .article-gallery--3,
  .article-gallery--4 {
    --cols: 2;
  }
}

.article-video__frame {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: #000;
}

.article-video__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.article-table {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
}

.article-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  line-height: 1.5;
}

.article-table th,
.article-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.article-table tr:last-child td {
  border-bottom: 0;
}

.article-table th {
  background: rgba(91, 43, 255, 0.06);
  color: var(--c-ink);
  font-weight: 600;
}

.prose .article-button {
  margin-block: 1.8em;
}

.prose .article-button a {
  color: #fff;
  text-decoration: none;
}

.prose .article-button .btn--ghost {
  color: var(--c-ink);
}

/* Clicking a picture in an article opens it large (lightbox.js). */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 8, 12, 0.96);
  color: #fff;
}

.lightbox::backdrop {
  background: transparent;
  backdrop-filter: blur(6px);
}

.lightbox__figure {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  height: 100%;
  padding: 64px clamp(16px, 6vw, 96px);
}

.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100dvh - 160px);
  border-radius: 10px;
  object-fit: contain;
}

.lightbox__figure figcaption {
  max-width: 60em;
  font-size: 0.95rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__btn--close { top: 16px; right: 16px; }
.lightbox__btn--prev { top: 50%; left: 16px; translate: 0 -50%; }
.lightbox__btn--next { top: 50%; right: 16px; translate: 0 -50%; }

.article__share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
}

.article__more-title {
  margin-bottom: 32px;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}

/* --- 404 ---------------------------------------------------------------- */

.not-found {
  min-height: 60vh;
  text-align: center;
}

.not-found .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.not-found__text {
  font-size: 1.125rem;
  color: var(--c-muted);
}

/* --- Editor preview -------------------------------------------------- */

.preview-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 200;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: #1b1726;
  color: #fff;
  font-size: 0.9375rem;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}

.preview-banner strong {
  margin-right: 6px;
  color: #c7b4ff;
}