/* =================================================================
   home.css — styles unique to the home page (index.html)
   Tokens live in base.css. Use var(--…) rather than raw values.
   ================================================================= */

/* ===================== Hero ===================== */

.hero {
  position: relative;
  /* Fill the viewport so opening the page shows the hero alone — the
     countdown sits fully below the fold instead of its "開催まで" caption
     peeking in at the bottom edge. dvh tracks the real visible height on
     mobile (browser chrome) so the bottom-anchored title never clips. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gap-page) var(--sp-9);
  overflow: hidden;
}

.hero-lines {
  position: absolute;
  inset: 0;              /* cover the hero box on ANY aspect ratio */
  pointer-events: none;
}

/* The SVG fills the hero like object-fit:cover (preserveAspectRatio
   "slice" on the element). This decouples the artwork's height from the
   viewport WIDTH — otherwise, on a narrow phone, the near-square SVG
   became short and the bottom-anchored title dropped out below it. Now
   the lines always fill behind the title. */
.hero-lines svg {
  display: block;
  width: 100%;
  height: 100%;
  /* 透明度は掛けない。0.85 だと隣のカウントダウン（不透明の同じ青）より白っぽく、薄く見えた */
}

.hero-lines .line {
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 7px;
  stroke-miterlimit: 10;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-title {
  line-height: 0;
}

.hero-text-svg {
  display: block;
  width: min(88vw, 600px);
  height: auto;
}

/* ===================== Countdown ===================== */

.countdown {
  padding: var(--sp-9) var(--gap-page) var(--sp-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.countdown-caption {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  color: var(--c-ink);
}

.countdown-value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.countdown-number {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--fw-black);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--c-blue);
  font-variant-numeric: tabular-nums;
}

.countdown-unit {
  font-family: var(--font-display);
  font-size: var(--text-hero-unit);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* 会期終了後（11/9 以降）の表示 */
.countdown-ended-title {
  font-size: var(--text-title);
  font-weight: var(--fw-black);
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--c-blue);
  text-align: center;
}

.countdown-ended-thanks {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--c-ink);
  text-align: center;
}

/* ===================== News ===================== */

.home-news { padding-block: var(--sp-7) var(--sp-8); }

/* 枠で囲わず、お知らせページ（.news-entry）と同じ罫線1本で区切る */
.news-item {
  font-size: var(--text-md);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-3);
}

.news-readmore {
  display: block;
  text-align: right;
  font-family: var(--font-en);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  text-decoration: none;
}

.news-readmore:hover { text-decoration: underline; }

/* News page — dated entry list */
.news-list {
  list-style: none;
}

.news-entry {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-line);
}

.news-entry:first-child { padding-top: 0; }

.news-date {
  font-family: var(--font-en);
  font-size: var(--text-ms);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  color: var(--c-blue);
}

.news-title {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* ===================== About ===================== */

.home-about { padding-block: var(--sp-10); }

.about-text p {
  font-size: var(--text-md);
  margin-bottom: var(--sp-3);
}

.about-text p:last-child { margin-bottom: 0; }

/* ===================== Access ===================== */

.home-access { padding-block: var(--sp-8) var(--sp-11); }

.access-map { margin-bottom: var(--sp-6); }

.map-info { margin-bottom: var(--sp-2); }

.map-school-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

.map-address {
  font-size: var(--text-xs);
  color: var(--c-muted);
}

.map-embed {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-line);
}

.map-embed iframe { display: block; }

.access-info { margin-top: var(--sp-7); }

.access-block { margin-bottom: var(--sp-6); }
.access-block:last-child { margin-bottom: 0; }

.access-block h3 {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
}

.access-block p { font-size: var(--text-md); }

@media (min-width: 768px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 var(--gap-page) var(--sp-12);
  }

  .countdown {
    padding: var(--sp-11) var(--gap-page) var(--sp-12);
  }
}