/* ============================================================
   Thaleria — News section
   /news listing + /news/[slug] article + related-news carousel
   Ported as-is from Claude Design "Full website WIP".
   (Related-news carousel reuses .tl-news__btn/.tl-news__dot/.tl-news__controls
    from home-sections.css — load both on news routes.)
   ============================================================ */

/* --- /news listing ----------------------------------------- */
.tl-news-page__eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.tl-news-page__eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--fg-accent);
  border-radius: 2px;
}

.tl-news-page__results {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-1);
  margin-bottom: var(--space-8);
  font-size: 14px;
  color: var(--fg-2);
}
.tl-news-page__results strong { color: var(--fg-1); font-weight: var(--weight-semibold); }

.tl-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
@media (max-width: 880px) {
  .tl-news-grid { grid-template-columns: 1fr; }
}

/* --- News list card ---------------------------------------- */
.tl-news-list-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-1);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tl-news-list-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--neutral-300);
  color: var(--fg-1);
}

.tl-news-list-card__cover {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--navy-700);
}
.tl-news-list-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tl-news-list-card__body {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.tl-news-list-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-weight: var(--weight-semibold);
}
.tl-news-list-card__meta::before {
  content: "";
  width: 14px; height: 2px;
  background: var(--fg-accent);
  border-radius: 2px;
  margin-right: 2px;
}
.tl-news-list-card__title {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}
.tl-news-list-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-news-list-card__cta {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border-1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  font-size: 14px;
}
.tl-news-list-card__cta svg {
  color: var(--orange-700);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tl-news-list-card:hover .tl-news-list-card__cta svg { transform: translateX(3px); }

/* Featured card — first item on page 1 spans the full grid */
.tl-news-list-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--surface-card);
}
.tl-news-list-card--featured .tl-news-list-card__cover {
  aspect-ratio: auto;
  min-height: 280px;
}
.tl-news-list-card--featured .tl-news-list-card__body {
  padding: var(--space-10) var(--space-10) var(--space-10);
  justify-content: center;
  gap: var(--space-4);
}
.tl-news-list-card--featured .tl-news-list-card__title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
}
.tl-news-list-card--featured .tl-news-list-card__desc {
  font-size: 15px;
  -webkit-line-clamp: 4;
}
@media (max-width: 880px) {
  .tl-news-list-card--featured { grid-template-columns: 1fr; }
  .tl-news-list-card--featured .tl-news-list-card__cover {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .tl-news-list-card--featured .tl-news-list-card__body {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }
}

/* --- Article page ------------------------------------------ */
.tl-article-hero {
  padding: 80px 0 var(--space-12);
  border-bottom: 1px solid var(--border-1);
}
.tl-article-hero__meta {
  margin-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: var(--weight-semibold);
}
.tl-article-hero__meta > span { white-space: nowrap; }
.tl-article-hero__category {
  display: inline-flex;
  align-items: center;
  background: var(--surface-accent);
  color: var(--orange-900);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.08em;
}
.tl-article-hero__title {
  margin-top: var(--space-5);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  max-width: 920px;
  text-wrap: balance;
}
.tl-article-hero__lede {
  margin-top: var(--space-6);
  max-width: 760px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-2);
}

.tl-article { background: var(--surface-page); }
.tl-article .tl-container { max-width: var(--container-md); }

.tl-article__cover {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--navy-700);
  position: relative;
  margin-bottom: var(--space-12);
  box-shadow: var(--shadow-2);
}
.tl-article__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Capped measure. Left unbounded, the body filled the 928px content column,
   which put ~108 characters on a line — well past the 45–75 that prose reads
   comfortably at, and the reason the eye loses its place on the return sweep.
   68ch lands around 70 characters. Mobile and tablet are already narrower than
   the cap, so only the desktop line length changes.
   Centred rather than left-aligned: once the column is narrower than the cover
   above it, hugging the left edge matches the cover on one side and leaves a gap
   on the other. Centring reads as a deliberate measure under a full-width image
   instead of a column that came up short. */
.tl-article__body {
  color: var(--fg-1);
  font-size: 17px;
  line-height: 1.7;
  max-width: 68ch;
  margin-inline: auto;
}
.tl-article__body p {
  margin: 0 0 var(--space-5);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-1);
}
.tl-article__body h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: 26px;
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.tl-article__body h2:first-child { margin-top: 0; }
.tl-article__body h3 {
  margin: var(--space-10) 0 var(--space-3);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
}
.tl-article__body ul,
.tl-article__body ol {
  margin: 0 0 var(--space-6);
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tl-article__body ul li,
.tl-article__body ol li {
  position: relative;
  padding-left: 28px;
  font-size: 17px;
  line-height: 1.65;
}
.tl-article__body ul li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.7em;
  width: 8px; height: 2px;
  background: var(--fg-accent);
  border-radius: 2px;
}
.tl-article__body ol {
  counter-reset: tlol;
}
.tl-article__body ol li {
  counter-increment: tlol;
}
.tl-article__body ol li::before {
  content: counter(tlol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--orange-700);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.tl-article__body blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  border-left: 3px solid var(--fg-accent);
  background: var(--surface-card);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-1);
}
.tl-article__body blockquote p {
  font-size: 19px;
  line-height: 1.55;
  font-style: italic;
  color: var(--fg-1);
  margin: 0;
}
.tl-article__body blockquote p + p { margin-top: var(--space-3); }
.tl-article__body a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.tl-article__body strong { font-weight: var(--weight-semibold); color: var(--fg-1); }

/* --- Share row + back link --------------------------------- */
.tl-article__share {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.tl-article__share-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.tl-article__share-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--fg-accent);
  border-radius: 2px;
}
.tl-article__share-actions {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tl-article__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-1);
  background: var(--surface-card);
  color: var(--fg-1);
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tl-article__share-btn:hover {
  border-color: var(--navy-700);
  color: var(--navy-700);
  background: var(--surface-card);
}
.tl-article__share-btn svg { color: var(--fg-2); }
.tl-article__share-btn:hover svg { color: var(--fg-accent); }

/* Copied confirmation state */
.tl-article__share-btn.is-copied,
.tl-article__share-btn.is-copied:hover {
  border-color: var(--success);
  color: var(--success);
  background: rgba(14, 159, 110, 0.08);
}
.tl-article__share-btn.is-copied svg,
.tl-article__share-btn.is-copied:hover svg {
  color: var(--success);
  animation: tl-share-check 0.28s var(--ease-out, ease) both;
}
@keyframes tl-share-check {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-article__share-btn.is-copied svg { animation: none; }
}

.tl-article__back {
  margin-top: var(--space-10);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--fg-2);
  text-decoration: none;
}
.tl-article__back:hover { color: var(--fg-1); }
.tl-article__back svg { color: var(--orange-700); }

/* --- Other-news carousel ----------------------------------- */
.tl-other-news {
  background: var(--surface-card);
  border-top: 1px solid var(--border-1);
}
.tl-other-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}
.tl-other-news__head .tl-section-head { margin-bottom: 0; }

.tl-other-news__viewport {
  overflow: hidden;
}
.tl-other-news__track {
  display: flex;
  width: 100%;
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.tl-other-news__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 980px) {
  .tl-other-news__page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tl-other-news__page { grid-template-columns: 1fr; }
  /* One card per page here (see cardsPerPageFor in NewsPages.jsx), so six posts
     become six pages — too many to read as dots, and the dot itself is a 4px bar
     that was never a realistic tap target. The arrows in the head drive it. */
  .tl-other-news .tl-news__dots { display: none; }
}

.tl-other-news .tl-news-list-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  gap: var(--space-4);
}
.tl-other-news .tl-news-list-card__title {
  font-size: 17px;
  line-height: 1.3;
  margin: 2px 0;
}
.tl-other-news .tl-news-list-card__desc {
  font-size: 13px;
  -webkit-line-clamp: 3;
}
.tl-other-news .tl-news-list-card__cta {
  padding-top: var(--space-4);
  font-size: 13px;
}