/* =========================================
   top.css — front-page specific styles
   Enqueued only on is_front_page() via lib/func/enqueue.php.
   Contains Hero layouts (full-bleed / split / image-top) and
   any TOP-only section styling that emerges later.
   ========================================= */

/* =========================================
   Hero — Full-bleed
   Image covers the viewport; text is laid over it.
   section.hero carries padding; .hero__media absolute-bleeds past it.
   ========================================= */
.hero-full {
  min-height: var(--hero-min-height, 80vh);
  padding-block: clamp(64px, 10vh, 120px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-full--no-image {
  /* Typography-driven fallback — no overlay, use surface background */
  min-height: auto;
  padding-block: clamp(96px, 14vh, 160px);
  background: var(--c-surface-2);
  justify-content: center;
}

.hero-full__media img {
  /* No filter — the image shows as-is. Darkening / tinting is handled by
     the ::after overlay (customizer-controlled color and opacity), so the
     client's brand photo stays faithful to what they uploaded. */
}

/* Video hero. The <video> uses the hero image as its poster attribute, so
   autoplay-blocked contexts (iOS Low Power Mode, reduced-motion, flaky
   networks) still show a visual instead of a blank hero. No opacity
   fade-in: earlier iterations started the video at opacity:0 and faded it
   in on `playing`, but iOS Safari suppresses autoplay on visually
   invisible videos — the element could get stuck blank on iPhone.

   Note on prefers-reduced-motion: we intentionally don't hide the video
   here. Browsers already suppress autoplay when reduced-motion is on,
   and the poster attribute keeps the hero image visible. Hiding the
   element (display: none) would also drop the poster, leaving the hero
   blank — which is exactly what happened on iPhones with "Reduce Motion"
   enabled in Accessibility settings. */
.hero-full__media > .hero-full__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay gradient — OFF by default. The raw hero photo shows through so a
   well-lit or already-processed image can speak for itself. Enabled by
   adding the `hero-full--with-overlay` modifier (customizer checkbox
   "Hero 画像にオーバーレイを適用する"). Stops scale proportionally against
   --hero-overlay-opacity:
     opacity 0.4 → stops (0.35 / 0.15 / 0.55 / 0.85)
     opacity 0.6 → stops (0.525 / 0.225 / 0.825 / 1.0 [clamped])
     opacity 0.3 → stops (0.2625 / 0.1125 / 0.4125 / 0.6375)
   The multipliers (0.875 / 0.375 / 1.375 / 2.125) preserve the original
   gradient shape (subtle top, heavier bottom) at any opacity level. */
.hero-full__media::after {
  display: none;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(var(--hero-overlay-color) / calc(var(--hero-overlay-opacity) * 0.875)) 0%,
    rgb(var(--hero-overlay-color) / calc(var(--hero-overlay-opacity) * 0.375)) 35%,
    rgb(var(--hero-overlay-color) / calc(var(--hero-overlay-opacity) * 1.375)) 75%,
    rgb(var(--hero-overlay-color) / calc(var(--hero-overlay-opacity) * 2.125)) 100%);
}

.hero-full--with-overlay .hero-full__media::after {
  display: block;
}

/* Light mode: lighter, inverted gradient so dark text remains legible */
.hero-full--with-overlay .is-on-light ~ .hero-full__media::after,
.hero-full--with-overlay:has(.is-on-light) .hero-full__media::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, calc(var(--hero-overlay-opacity) * 0.5)) 0%,
    rgba(255, 255, 255, calc(var(--hero-overlay-opacity) * 0.8)) 100%);
}

.hero-full__content {
  width: 100%;
}

.hero-full__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: end;
}

@media (min-width: 980px) {
  .hero-full__grid {
    grid-template-columns: 5fr 3fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.hero-full__main {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.hero-full__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-full__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Hero typography inherits color from the .is-on-dark / .is-on-light
   parent. .hero-full__content sets the base color — customizer can
   override via --hero-text-color (see lib/func/css-variables.php).
   When the variable is unset, `unset` falls back to the is-on-* rule. */
.hero-full__content.is-on-dark  { color: var(--hero-text-color, #ffffff); }
.hero-full__content.is-on-light { color: var(--hero-text-color, var(--c-text)); }

.hero-full__eyebrow { color: inherit; opacity: 0.8; }

.hero-full__display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: inherit;
  max-width: 10em;
}

.hero-full__sub {
  font-size: var(--text-md);
  line-height: 1.8;
  color: inherit;
  opacity: 0.85;
  max-width: 36rem;
  font-weight: 400;
}

/* =========================================
   Hero — Split
   Text on themed surface, image bleeds to right viewport edge.
   section.hero normally has inline padding; this variant zeros it so
   the image reaches the viewport and reintroduces padding inside
   .hero-split__text-side only.
   ========================================= */
.hero-split {
  padding-inline: 0;
  padding-block: 0;
  min-height: clamp(560px, 80vh, 800px);
}

.hero-split__content {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  min-height: inherit;
}

@media (min-width: 980px) {
  .hero-split__content {
    grid-template-columns: 5fr 4fr;
  }
}

.hero-split--no-image .hero-split__content {
  grid-template-columns: 1fr;
}

.hero-split__text-side {
  padding-inline: var(--gutter-inline);
  padding-block: clamp(48px, 8vw, 96px);
  display: flex;
  align-items: center;
}

.hero-split__text {
  max-width: 600px;
  width: 100%;
}

@media (min-width: 980px) {
  .hero-split__text {
    margin-right: clamp(0px, 2vw, 32px);
    margin-left: auto;
  }
}

.hero-split__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.hero-split__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-text-muted);
}

.hero-split__display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--c-text);
  margin-bottom: clamp(20px, 3vw, 32px);
  max-width: 10em;
}

.hero-split__sub {
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--c-text-muted);
  max-width: 36rem;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.hero-split__cta-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
}

/* Image side — bleeds to right viewport edge */
.hero-split__image-side {
  position: relative;
  min-height: 320px;
  background: var(--c-surface-2);
}

@media (min-width: 980px) {
  .hero-split__image-side { min-height: 100%; }
}

.hero-split__image-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   Hero — Image-top
   Image block above, text block below.
   ========================================= */
.hero-imgtop {
  padding-top: 0;
  padding-bottom: clamp(24px, 4vw, 48px);
}

.hero-imgtop__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 64vh;
  overflow: hidden;
  margin-bottom: clamp(48px, 8vw, 96px);
}

@media (min-width: 980px) {
  .hero-imgtop__media {
    aspect-ratio: 21 / 9;
  }
}

.hero-imgtop__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-imgtop__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: start;
}

@media (min-width: 980px) {
  .hero-imgtop__grid {
    grid-template-columns: 5fr 3fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.hero-imgtop__main {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.hero-imgtop__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-imgtop__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-text-muted);
}

.hero-imgtop__display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-text);
  max-width: 10em;
}

.hero-imgtop__sub {
  font-size: var(--text-md);
  line-height: 1.9;
  color: var(--c-text-muted);
  max-width: 36rem;
}

/* No-image fallback — image block hidden, grid becomes single column */
.hero-imgtop--no-image .hero-imgtop__grid {
  grid-template-columns: 1fr;
}

/* =========================================
   Image-top — side area (optional free-text column, customizer-driven)
   If the side aside is empty, the grid collapses to a single column so
   main takes the full reading width. :has() gives us this without
   adding a body/container class from PHP.
   ========================================= */
.hero-imgtop__side {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--c-text-muted);
}

@media (min-width: 980px) {
  .hero-imgtop__side {
    border-left: 1px solid var(--c-border);
    padding-left: clamp(32px, 4vw, 56px);
    align-self: stretch;
  }
}

/* Nice defaults for blockquote content if the admin chose to use one */
.hero-imgtop__side blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-ml);
  line-height: 1.7;
  font-weight: 400;
  color: var(--c-text);
  font-feature-settings: "halt";
}

.hero-imgtop__side blockquote cite {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 12px;
  font-style: normal;
}

@media (min-width: 980px) {
  .hero-imgtop__grid:not(:has(.hero-imgtop__side)) {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Journal — front-page "latest articles" section.
   The list items themselves use .article-list / .article-list__item
   styles from page.css (shared between front + archive).
   ========================================= */
.journal {
  padding-block: var(--section-pad-lg);
}

.journal__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  margin-bottom: clamp(40px, 5vw, 64px);
}

@media (min-width: 720px) {
  .journal__head {
    grid-template-columns: 3fr 2fr;
    gap: var(--gap-lg);
    align-items: end;
  }
  .journal__head-cta { justify-self: end; }
}

.journal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 12em;
}