/** TOPICS PAGE **/

/* =========================
   ROOT VARIABLES
   ========================= */

:root{
  /* ===== wide screen scaling ===== */
  /*
    1   = old behavior, stops at the 1920px design size
    1.5 = continues growing to 150% of the old max caps
    2   = continues growing to 200% of the old max caps
  */
  --wide-scale: 2;

  /* overall cluster sizing / movement */
  --topics-cluster-w: clamp(320px, calc(1270 / 1920 * 100vw), 1270px);
  --topics-cluster-shift-x: 0px;
  --topics-cluster-shift-y: 0px;

  --topics-center-gap: clamp(125px, calc(var(--topic-piece-h) * 2.75), 320px);

  /* topic cluster spacing */
  --topics-top-gap: 0px;
  --topics-col-gap: clamp(10px, calc(56 / 1920 * 100vw), 56px);

  /* individual row gaps */
  --topics-gap-ab-ms: clamp(12px, calc(34 / 1920 * 100vw), 34px);
  --topics-gap-ms-hl: clamp(8px, calc(34 / 1920 * 100vw), 34px);
  --topics-gap-hl-rp: clamp(12px, calc(34 / 1920 * 100vw), 34px);

  --topics-mobile-gap: 18px;

  /* topic piece sizing */
  --topic-piece-h: clamp(39px, calc(111.5 / 1920 * 100vw), 111.5px);

  --ab-w: min(calc(var(--topic-piece-h) * 4.2152), 940px);
  --ms-w: min(calc(var(--topic-piece-h) * 4.5471), 1013px);
  --ac-w: min(calc(var(--topic-piece-h) * 4.5471), 1013px);
  --hl-w: min(calc(var(--topic-piece-h) * 3.4798), 775px);
  --r-w:  min(calc(var(--topic-piece-h) * 3.4798), 775px);
  --rp-w: min(calc(var(--topic-piece-h) * 5.2108), 1162px);
  --drop-w: calc(var(--topic-piece-h) * 1.7848);

  /* individual nudging */
  --ab-x: 0px;
  --ab-y: 0px;

  --ms-x: 0px;
  --ms-y: 0px;

  --ac-x: 0px;
  --ac-y: 0px;

  --hl-x: 0px;
  --hl-y: 0px;

  --r-x: 0px;
  --r-y: 0px;

  --rp-x: 0px;
  --rp-y: 0px;

  --drop-x: 0px;
  --drop-y: -6px;

  /* articles panel */
  --articles-panel-w: clamp(320px, calc(760 / 1920 * 100vw), 760px);
  --articles-panel-mt: clamp(16px, calc(34 / 1920 * 100vw), 34px);
  --articles-title-mb: clamp(10px, calc(18 / 1920 * 100vw), 18px);
  --article-list-gap: clamp(8px, calc(14 / 1920 * 100vw), 14px);

  /* article tiles */
  --article-tile-h: clamp(38px, calc(64 / 1920 * 100vw), 64px);
  --article-tile-pad-x: clamp(14px, calc(24 / 1920 * 100vw), 24px);
  --article-tile-radius: clamp(12px, calc(18 / 1920 * 100vw), 18px);

  --topic-articles-title-size: 28px;
  --article-tile-font-size: 18px;

  --article-tile-pad-y: clamp(10px, calc(12 / 1920 * 100vw), 12px);

  /* top nav */
  --top-link-w: clamp(72px, calc(209.6 / 1920 * 100vw), 209.6px);
  --top-links-gap: clamp(12px, calc(34 / 1920 * 100vw), 34px);
  --top-links-shift-x: 0px;
  --top-links-shift-y: clamp(-83px, calc(var(--content-pad) * -0.8), -10px);

  /* effects */
  --hover-glow2: rgba(150,190,255,0.65);
  --shadow-nav: drop-shadow(0 8px 16px rgba(0,0,0,0.22));
  --shadow-image: drop-shadow(0 8px 22px rgba(0,0,0,0.14));
  --topic-piece-layer: 1;
  --topic-drop-layer: 2;
  --topic-glow-layer: 3;
}


/* =========================================
   WIDE SCREEN UPSCALE ONLY
   nothing changes at or below 1920px
   ========================================= */

@media (min-width: 1920px){
  :root{
    /* overall cluster sizing / movement */
    --topics-cluster-w: clamp(1270px, calc(1270 / 1920 * 100vw), calc(1270px * var(--wide-scale)));

    /*
      Keep the same internal relationship as the normal layout:
      center gap follows topic-piece height, capped at 320px.
      Then after 1920px it can grow toward 2x.
    */
    --topics-center-gap: clamp(320px, calc(320 / 1920 * 100vw), calc(320px * var(--wide-scale)));

    /* topic cluster spacing */
    --topics-col-gap: clamp(56px, calc(56 / 1920 * 100vw), calc(56px * var(--wide-scale)));

    /* individual row gaps */
    --topics-gap-ab-ms: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));
    --topics-gap-ms-hl: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));
    --topics-gap-hl-rp: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));

    /* topic piece sizing */
    --topic-piece-h: clamp(111.5px, calc(111.5 / 1920 * 100vw), calc(111.5px * var(--wide-scale)));

    /* small decorative nudge */
    --drop-y: clamp(-12px, calc(-6 / 1920 * 100vw), -6px);

    /* articles panel */
    --articles-panel-w: clamp(760px, calc(760 / 1920 * 100vw), calc(760px * var(--wide-scale)));
    --articles-panel-mt: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));
    --articles-title-mb: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
    --article-list-gap: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));

    /* article tiles */
    --article-tile-h: clamp(64px, calc(64 / 1920 * 100vw), calc(64px * var(--wide-scale)));
    --article-tile-pad-x: clamp(24px, calc(24 / 1920 * 100vw), calc(24px * var(--wide-scale)));
    --article-tile-radius: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));

    --topic-articles-title-size: clamp(28px, calc(28 / 1920 * 100vw), calc(28px * var(--wide-scale)));
    --article-tile-font-size: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));

	--article-tile-pad-y: clamp(12px, calc(12 / 1920 * 100vw), calc(12px * var(--wide-scale)));

    /* top nav */
    --top-link-w: clamp(209.6px, calc(209.6 / 1920 * 100vw), calc(209.6px * var(--wide-scale)));
    --top-links-gap: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));
    --top-links-shift-y: clamp(calc(-83px * var(--wide-scale)), calc(-83 / 1920 * 100vw), -83px);
  }
}


/* =========================
   PAGE LAYOUT
   ========================= */

.topics-page{
  padding-top: 0;
}

.topics-stage{
  display: flex;
  justify-content: center;
  width: 100%;
}


/* =========================
   TOP NAV
   ========================= */

.top-links{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--top-links-gap);
  margin-top: 0;
  margin-bottom: var(--topics-top-gap);
}

.top-links__home{
  position: relative;
  display: inline-block;
  width: var(--top-link-w);
  line-height: 0;
  text-decoration: none;
  filter: var(--shadow-nav);

  transform:
    translateX(var(--top-links-shift-x))
    translateY(var(--top-links-shift-y));

  transition: transform 160ms ease, filter 160ms ease;
}

.top-links__home img{
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.top-links__home:hover{
  filter:
    drop-shadow(0 0 10px var(--hover-glow2))
    drop-shadow(0 0 22px var(--hover-glow2));
}

.top-links__home:active{
  transform:
    translateX(var(--top-links-shift-x))
    translateY(var(--top-links-shift-y));
}


/* =========================
   TOPICS CLUSTER
   ========================= */

.topics-cluster{
  position: relative;
  isolation: isolate;
  width: min(100%, var(--topics-cluster-w));

  transform:
    translateX(var(--topics-cluster-shift-x))
    translateY(var(--topics-cluster-shift-y));

  display: grid;

  grid-template-columns: var(--ms-w) var(--ac-w);

  grid-template-rows:
    auto
    var(--topics-gap-ab-ms)
    auto
    var(--topics-gap-ms-hl)
    auto
    var(--topics-gap-hl-rp)
    auto;

  grid-template-areas:
    "ab ab"
    ". ."
    "ms ac"
    ". ."
    "hl r"
    ". ."
    "rp rp";

  column-gap: var(--topics-center-gap);
  row-gap: 0;

  justify-content: center;
  justify-items: center;
  align-items: start;
}


/* =========================
   TOPIC PIECES
   ========================= */

.topic-piece{
  position: relative;
  z-index: var(--topic-piece-layer);
  display: inline-block;
  padding: 0;
  border: 0;
  line-height: 0;
  background: transparent;
  cursor: pointer;

  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.22));
  transition: filter 160ms ease, transform 160ms ease;
}

.topic-piece img{
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.topic-piece:hover{
  z-index: var(--topic-glow-layer);
  filter:
    drop-shadow(0 0 10px var(--hover-glow2))
    drop-shadow(0 0 22px var(--hover-glow2));
}

.topic-piece.is-active{
  z-index: var(--topic-glow-layer);
  filter:
    drop-shadow(0 0 12px var(--hover-glow2))
    drop-shadow(0 0 28px var(--hover-glow2));
}

.topic-piece:focus-visible{
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 4px;
  border-radius: var(--article-tile-radius);
}


/* =========================
   TOPIC PLACEMENT
   ========================= */

.topic-piece--ab{
  grid-area: ab;
  width: var(--ab-w);
  justify-self: center;
  transform: translateX(var(--ab-x)) translateY(var(--ab-y));
}

.topic-piece--ms{
  grid-area: ms;
  width: var(--ms-w);
  justify-self: end;
  transform: translateX(0) translateY(var(--ms-y));
}

.topic-piece--ac{
  grid-area: ac;
  width: var(--ac-w);
  justify-self: start;
  transform: translateX(0) translateY(var(--ac-y));
}

.topic-piece--hl{
  grid-area: hl;
  width: var(--hl-w);
  justify-self: end;
  transform: translateX(0) translateY(var(--hl-y));
}

.topic-piece--r{
  grid-area: r;
  width: var(--r-w);
  justify-self: start;
  transform: translateX(0) translateY(var(--r-y));
}

.topic-piece--rp{
  grid-area: rp;
  width: var(--rp-w);
  justify-self: center;
  transform: translateX(var(--rp-x)) translateY(var(--rp-y));
}

.topic-piece--drop{
  grid-column: 1 / span 2;
  grid-row: 3 / span 3;
  justify-self: center;
  align-self: center;
  width: var(--drop-w);
  z-index: var(--topic-drop-layer);
  pointer-events: none;
  transform: translateX(var(--drop-x)) translateY(var(--drop-y));
}

/* =========================
   ARTICLES PANEL
   ========================= */

.topic-articles{
  width: min(100%, var(--articles-panel-w));
  margin: var(--articles-panel-mt) auto 0;
  text-align: center;
}

.topic-articles__title{
  margin: 0 0 var(--articles-title-mb);
  font-family: "Cinzel", serif;
  font-size: var(--topic-articles-title-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 0 12px rgba(0,0,0,0.28);
}

.topic-articles__list{
  display: flex;
  flex-direction: column;
  gap: var(--article-list-gap);
  align-items: center;
}

.topic-empty{
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,244,240,0.72);
  text-align: center;
  background: rgba(255,255,255,0.04);
}

@media (min-width: 1920px){
  .topic-empty{
    padding:
      clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)))
      clamp(20px, calc(20 / 1920 * 100vw), calc(20px * var(--wide-scale)));
    border-radius: clamp(16px, calc(16 / 1920 * 100vw), calc(16px * var(--wide-scale)));
  }
}


/* =========================
   ARTICLE TILES
   ========================= */

.article-tile{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  width: 100%;
  min-height: var(--article-tile-h);
  padding: var(--article-tile-pad-y) var(--article-tile-pad-x);
  border: 0;
  border-radius: var(--article-tile-radius);

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Cinzel", serif;
  font-size: var(--article-tile-font-size);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.94);
  text-decoration: none;
  text-align: center;

  background:
    radial-gradient(
      ellipse at center,
      rgba(160,200,255,0.05),
      rgba(0,0,0,0)
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.03) 40%,
      rgba(0,0,0,0.32) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.45);

  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.10));

  opacity: 0;
  transform: translateY(12px);
  animation: articleTileIn 360ms ease forwards;

  transition: filter 160ms ease, transform 160ms ease;
}

.article-tile::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(170,195,235,0) 38%,
      rgba(170,195,235,0.05) 62%,
      rgba(170,195,235,0.14) 82%,
      rgba(170,195,235,0.28) 100%
    );
}

.article-tile::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(circle at 0% 0%, rgba(170,195,235,0.15), transparent 25%),
    radial-gradient(circle at 100% 0%, rgba(170,195,235,0.15), transparent 25%),
    radial-gradient(circle at 0% 100%, rgba(170,195,235,0.15), transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(170,195,235,0.15), transparent 25%);

  box-shadow:
    inset 0 0 0 1px rgba(170,195,235,0.25),
    inset 0 0 18px rgba(170,195,235,0.08);
}

.article-tile > *{
  position: relative;
  z-index: 2;
}

.article-tile:focus-visible{
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 4px;
}

.article-tile:hover{
  filter:
    drop-shadow(0 0 10px var(--hover-glow2))
    drop-shadow(0 0 20px var(--hover-glow2));
  transform: translateY(-1px);
}

.article-tile:hover::after{
  box-shadow:
    inset 0 0 0 1px rgba(170,195,235,0.45),
    inset 0 0 24px rgba(170,195,235,0.18);
}

@keyframes articleTileIn{
  from{
    opacity: 0;
    transform: translateY(12px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 600px){

  .topics-cluster{
    grid-template-columns: 1fr;

    grid-template-rows:
      auto
      var(--topics-mobile-gap)
      auto
      var(--topics-mobile-gap)
      auto
      var(--topics-mobile-gap)
      auto
      var(--topics-mobile-gap)
      auto
      var(--topics-mobile-gap)
      auto;

    grid-template-areas:
      "ab"
      "."
      "ms"
      "."
      "hl"
      "."
      "r"
      "."
      "ac"
      "."
      "rp";

    row-gap: 0;
  }

  .topic-piece--drop{
    display: none;
  }

  .topic-piece--ab,
  .topic-piece--ms,
  .topic-piece--ac,
  .topic-piece--hl,
  .topic-piece--r,
  .topic-piece--rp{
    justify-self: center;
    transform: none;
  }

  .topic-articles{
    width: min(70vw, 480px);
  }

}

@media (max-width: 500px){
  :root{
    --topics-top-gap: 64px;
    --top-links-shift-y: 34px;
    --article-tile-pad-y: 12px;
  }

  .topic-articles__title{
    font-size: 22px;
  }

  .article-tile{
    font-size: 16px;
	line-height: 1.3;
  }
}

@media (max-width: 320px){

  .topic-articles__title{
    font-size: 20px;
  }

  .article-tile{
    font-size: 14px;
  }
}

.topic-piece picture{
  display: block;
  width: 100%;
  line-height: 0;
}