/* ==========================================================================
   Shared UI components
   Small reusable widgets referenced across multiple pages. Page-specific
   composition (grids, photo layouts, etc.) belongs in assets/css/pages/*.
   ========================================================================== */

/* -- Section title ---------------------------------------------------------
   English serif headings used throughout every page
   (e.g. "Roots of Bushido", "Lesson", "Instructor", "Access"). */

.section-title {
  font-family: var(--font-en-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  text-align: center;
}

/* -- Framed label ------------------------------------------------------
   White-bordered box with letter-spaced caps text, e.g. "ICHIGO-ICHIE",
   "SHITAMACHI / RYOUGOKU". */

.framed-label {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid currentColor;
  font-family: var(--font-en-serif);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* -- Buttons ------------------------------------------------------------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-jp-sans);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
}

.btn-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-jp-sans);
  font-size: 0.75rem;
}

/* -- Page hero (single photo, slow zoom) ---------------------------------
   Shared by Experience / Lodging / Ryogoku / Access. PDF annotation on
   each of these pages: "枠内でゆっくり変倍表示（120%→100%／5秒程度）" —
   same motion as the TOP hero's per-slide zoom, but here there is only
   ever one photo (no crossfade/slideshow), so it's a separate, simpler
   component instead of reusing assets/css/pages/top.css's .hero. Each
   page sets its own aspect-ratio in its own pages/*.css (photos differ). */

.page-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Scoped to this explicit class (not a bare `.page-hero img`) so extra
   images inside .page-hero — e.g. Lodging's armor overlay — aren't
   stretched to fill the container too. */
.page-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2);
  animation: page-hero-zoom 5s ease-out forwards;
}

@keyframes page-hero-zoom {
  from {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}

/* Text block overlaid directly on the hero photo itself (Experience,
   Lodging), as opposed to a separate solid section below it (Ryogoku,
   Access use .section-dark for that instead). A bottom-anchored gradient
   scrim keeps the white text legible without editing the photo itself —
   coding-spec.md: "文字可読性はoverlay/blur/gradientで確保し、画像その
   ものを再加工しない方式を優先". */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-6);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
  color: var(--color-white);
  text-align: center;
}

.page-hero__overlay .container {
  width: 100%;
}

.page-hero__heading {
  font-family: var(--font-en-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
}

.page-hero__text {
  margin-top: var(--space-4);
  line-height: 2;
}

/* -- Dark section (black bg, centered heading + body) ---------------------
   Shared by the intro block on Ryogoku / Access, and the Instructor
   section on Experience — same visual pattern as TOP's .intro, but kept
   as its own component here rather than reusing assets/css/pages/top.css
   (which stays untouched per this pass's scope). */
.section-dark {
  background: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-7) var(--space-8);
  text-align: center;
}

.section-dark__text {
  margin-top: var(--space-5);
  line-height: 2;
}

/* -- Floating reservation CTA --------------------------------------------
   PDF annotation: "「トップ」と「剣術体験」のページ下部に常時リンクを表示
   させてください" — shown on TOP and Experience (剣術体験) with the
   "体験のご予約" / Airbnb-only label. Lodging carries the same fixed
   badge pattern but with its own label ("宿泊のご予約") and two links
   (Airbnb + Booking.com) — docs/todo.md already flags the PC/SP label
   mismatch as a copy discrepancy, implemented literally either way.
   Confirmed NOT present on Ryogoku / Access (SP mockup shows this badge
   crossed out with "◎下部のリンクなし" on both).
   The PDF badge also carries the Airbnb/Booking.com marks, but neither
   common/icon/airbnb-logo.svg nor booking-logo.svg has been exported yet
   (docs/todo.md), so this is text-only until then. Airbnb target URLs
   are marked "will be sent later" in the PDF where used without a real
   URL — href is a placeholder there (docs/todo.md, "Final external
   URLs"). */
.floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-page-top);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-red);
  color: var(--color-white);
  text-align: center;
}

.floating-cta__label {
  width: 100%;
  font-family: var(--font-jp-sans);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.floating-cta__links {
  display: flex;
  gap: var(--space-3);
}

.floating-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-4);
  background: var(--color-white);
  color: var(--color-black);
  border-radius: var(--radius-pill);
  font-family: var(--font-en-serif);
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .floating-cta {
    left: var(--space-4);
    right: auto;
    bottom: var(--space-4);
    flex-direction: column;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
  }

  .floating-cta__label {
    width: auto;
  }
}