/* ============================================================
 * Access page — LOUNGE 幸良(KOURA)
 * Bright luxury — same palette as Concept / Floor
 * ============================================================ */

.access-page {
  --access-bg-1: var(--color-bg, #faf8f3);
  --access-bg-2: var(--color-surface, #f1e9dc);
  --access-ink:  #1f1c19;
  --access-mute: #6b6258;
  --access-line: rgba(31, 28, 25, 0.18);
  --access-gold: var(--color-gold, #c9a961);

  color: var(--access-ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.7) 0%, transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(255, 255, 255, 0.6) 0%, transparent 42%),
    linear-gradient(135deg, var(--access-bg-1) 0%, var(--access-bg-2) 100%);
}

/* Cancel non-home site-main top padding so the KV is full-bleed. */
body:not(.home) .site-main:has(.access-page) {
  padding-top: 0;
}

/* 共通の営業カレンダー(.section-calendar)は TOP では下罫線で区切るが、
   Access ページは罫線を一切使わない連続グラデ言語。ここだけ罫線が浮くため、
   Access スコープでは下罫線を無効化する(共通本体 calendar.css は触らない)。 */
.access-page .section-calendar {
  border-bottom: 0;
}

/* ============================================================
 * ① Page hero
 * ============================================================ */
.access-hero {
  position: relative;
  /* cast と統一。 */
  min-height: clamp(360px, 50vh, 560px);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

.access-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.access-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* 他ページ(vip/floor/recruit/contact)と統一。
     parallax の y:-120 でも下側に余白が出ないよう拡大バッファを確保する。 */
  transform: scale(1.7);
  transform-origin: center center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .access-hero__media img {
    transform: none;
  }
}

.access-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 70% 50%,
      rgba(8, 8, 10, 0.30) 0%,
      transparent 60%),
    linear-gradient(90deg,
      rgba(8, 8, 10, 0.05) 0%,
      rgba(8, 8, 10, 0.24) 50%,
      rgba(8, 8, 10, 0.52) 100%),
    linear-gradient(180deg,
      rgba(8, 8, 10, 0.20) 0%,
      rgba(8, 8, 10, 0.10) 50%,
      rgba(8, 8, 10, 0.35) 100%);
  pointer-events: none;
}

/* cast と同じ dark blur veil。blur は弱めて KV のネオンを活かす(#8)。 */
.access-hero__veil::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  backdrop-filter: blur(7px) saturate(0.95);
  -webkit-backdrop-filter: blur(7px) saturate(0.95);
  background: rgba(8, 8, 10, 0.10);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 20%,
    rgba(0, 0, 0, 0.85) 55%,
    black 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 20%,
    rgba(0, 0, 0, 0.85) 55%,
    black 100%);
  pointer-events: none;
}

.access-hero__inner {
  position: relative;
  /* cast と同じ右寄せ。 */
  text-align: right;
  padding-top: clamp(5rem, 13vh, 7.5rem);
  padding-bottom: clamp(1.5rem, 3.5vh, 2.75rem);
  /* 右端から少し離す（句読点と eyebrow の見切れ対策）。 */
  padding-right: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
}

.access-hero__inner .eyebrow {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: 0.36em;
  margin: 0 -0.36em 1.25rem 0;
  color: var(--access-gold);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

.access-hero__title {
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  /* Neon KV is dark — invert text colour for this hero only. */
  color: #faf8f3;
  text-shadow:
    0 0 28px rgba(0, 0, 0, 0.65),
    0 0 56px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.70),
    0 1px 2px rgba(0, 0, 0, 0.80);
  /* 句読点ぶら下げ分の余白を右に確保（句読点グリフがこの中に収まる）。 */
  padding-right: 0.5em;
  /* Safari: 句読点を行末にぶら下げる（対応ブラウザのみ）。 */
  hanging-punctuation: allow-end last;
}

.access-hero__title-line {
  display: block;
  margin-right: -0.06em;
}

/* 句読点を行ボックスの幅計算から外し、本文字の右端を揃える。
   width: 0 で文字幅を持たせず、グリフだけ親 padding 内に描画させる（ぶら下げ）。 */
.access-hero__title-punct {
  display: inline-block;
  width: 0;
  overflow: visible;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .access-hero__title {
    /* 中央寄せ時はぶら下げ用の余白不要。 */
    padding-right: 0;
  }
  .access-hero__title-punct {
    display: inline;
    width: auto;
  }
}

.access-hero__lead {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 2.1;
  letter-spacing: 0.12em;
  /* Cream on dark KV — matches the inverted title above. */
  color: #faf8f3;
  text-shadow:
    0 0 18px rgba(0, 0, 0, 0.65),
    0 0 36px rgba(0, 0, 0, 0.50),
    0 2px 8px rgba(0, 0, 0, 0.75);
  max-width: 32em;
  margin: 0 -0.12em 0 auto;
}

@media (max-width: 720px) {
  .access-hero__inner {
    text-align: center;
  }
  .access-hero__inner .eyebrow,
  .access-hero__title-line {
    margin-right: 0;
  }
  .access-hero__lead {
    margin-inline: auto;
  }
  .access-hero__veil::after {
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 40%,
      black 100%);
            mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 40%,
      black 100%);
  }
}

/* ============================================================
 * ② Information (Map + Hours 統合)
 * ============================================================ */
.access-info {
  padding-block: clamp(5rem, 12vh, 9rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
}

.access-info__inner {
  max-width: 1080px;
}

.access-info__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.access-info__header .eyebrow {
  margin-bottom: 1rem;
  /* 明るい紙面上は AA 対応の濃い金に（#1 コントラスト対策）。 */
  color: var(--color-gold-text);
}

.access-info__lead {
  max-width: 42em;
  margin: 0 auto;
  color: var(--color-text-mute);
  font-size: 0.95rem;
  line-height: 2;
  letter-spacing: 0.06em;
}

.access-info__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .access-info__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
    max-width: 36em;
    margin-inline: auto;
  }
  /* 「開いているか」を最優先で見せる。情報リストを地図より先に(#5)。 */
  .access-info__list {
    order: -1;
  }
}

/* Map column */
.access-info__map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--access-line);
  overflow: hidden;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (max-width: 900px) {
  .access-info__map-wrap {
    aspect-ratio: 16 / 10;
  }
}

.access-info__map-wrap::before,
.access-info__map-wrap::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--access-gold);
  pointer-events: none;
  z-index: 2;
}

.access-info__map-wrap::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.access-info__map-wrap::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

.access-info__map-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.access-info__map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.access-info__map-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  /* テキストは AA 対応の濃い金（#1）。タップ領域を 44px 以上に（#11）。 */
  color: var(--color-gold-text);
  text-decoration: none;
  border-bottom: 1px solid var(--access-gold);
  padding: 0.55rem 0;
  min-height: 44px;
  transition: gap 0.3s var(--ease-out, ease);
}

.access-info__map-links a:hover,
.access-info__map-links a:focus-visible {
  gap: 1rem;
}

.access-info__arrow {
  display: inline-block;
  position: relative;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}

.access-info__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

/* Info list column */
.access-info__list {
  margin: 0;
  font-family: var(--font-serif-jp);
  border-top: 1px solid var(--access-line);
}

.access-info__row {
  display: grid;
  grid-template-columns: minmax(7em, max-content) 1fr;
  align-items: baseline;
  gap: 1.25rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--access-line);
}

.access-info__row dt {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--access-mute);
  margin: 0;
}

.access-info__row dd {
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--access-ink);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  line-height: 1.8;
}

.access-info__time {
  font-family: var(--font-serif-en);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  letter-spacing: 0.06em;
  color: var(--access-ink);
}

.access-info__note {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--access-mute);
}

.access-info__tel {
  font-family: var(--font-serif-en);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  letter-spacing: 0.06em;
  color: var(--access-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--access-line);
  transition: border-color 0.3s var(--ease-out, ease), color 0.3s var(--ease-out, ease);
}

.access-info__tel:hover,
.access-info__tel:focus-visible {
  color: var(--access-gold);
  border-bottom-color: var(--access-gold);
}

@media (max-width: 480px) {
  .access-info__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* ============================================================
 * ③ Getting Here
 * ============================================================ */
.access-direction {
  padding-block: clamp(5rem, 12vh, 9rem);
  background:
    linear-gradient(180deg, transparent 0%, rgba(241, 233, 220, 0.45) 100%);
}

.access-direction__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.access-direction__header .eyebrow {
  margin-bottom: 1rem;
  /* 明るい紙面上は AA 対応の濃い金に（#1 コントラスト対策）。 */
  color: var(--color-gold-text);
}

.access-direction__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .access-direction__list {
    grid-template-columns: 1fr;
    max-width: 28em;
    margin-inline: auto;
  }
}

.access-direction__item {
  position: relative;
  padding: clamp(2rem, 3.5vw, 2.5rem);
  text-align: center;
  background: rgba(255, 253, 248, 0.55);
  border: 1px solid var(--access-line);
}

.access-direction__item::before,
.access-direction__item::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--access-gold);
  pointer-events: none;
}

.access-direction__item::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.access-direction__item::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

.access-direction__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 1.25rem;
  color: var(--access-gold);
}

.access-direction__en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  letter-spacing: 0.16em;
  color: var(--color-gold-text);
  margin: 0 0 0.5rem;
}

.access-direction__title {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  letter-spacing: 0.14em;
  color: var(--access-ink);
  margin: 0 0 0.85rem;
}

.access-direction__lead {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.9rem, 1.1vw, 0.95rem);
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--access-mute);
  margin: 0;
}

/* ============================================================
 * ④ Landmark
 * ============================================================ */
.access-landmark {
  padding-block: clamp(5rem, 12vh, 9rem);
}

.access-landmark__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.access-landmark__header .eyebrow {
  margin-bottom: 1rem;
  /* 明るい紙面上は AA 対応の濃い金に（#1 コントラスト対策）。 */
  color: var(--color-gold-text);
}

.access-landmark__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .access-landmark__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 36em;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .access-landmark__list {
    grid-template-columns: 1fr;
    max-width: 22em;
  }
}

.access-landmark__item {
  text-align: center;
}

.access-landmark__figure {
  position: relative;
  width: 100%;
  /* 素材(820×1233=2/3)に合わせ、目印の看板が切れないように(#7)。 */
  aspect-ratio: 2 / 3;
  margin: 0 0 1.25rem;
  overflow: hidden;
  border: 1px solid var(--access-line);
  background: rgba(255, 253, 248, 0.55);
}

.access-landmark__figure::before,
.access-landmark__figure::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--access-gold);
  pointer-events: none;
  z-index: 2;
}

.access-landmark__figure::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.access-landmark__figure::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

.access-landmark__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder when image is not yet supplied. */
.access-landmark__figure.is-placeholder {
  background:
    linear-gradient(135deg, rgba(201, 169, 97, 0.06) 0%, rgba(201, 169, 97, 0.14) 100%),
    rgba(255, 253, 248, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-landmark__figure.is-placeholder::after,
.access-landmark__figure.is-placeholder::before {
  border-color: rgba(201, 169, 97, 0.45);
}

.access-landmark__placeholder {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  letter-spacing: 0.2em;
  color: rgba(201, 169, 97, 0.7);
  text-align: center;
  padding: 0 1rem;
}

.access-landmark__en {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  letter-spacing: 0.16em;
  color: var(--color-gold-text);
  margin: 0 0 0.4rem;
}

.access-landmark__title {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  letter-spacing: 0.14em;
  color: var(--access-ink);
  margin: 0 0 0.75rem;
}

.access-landmark__lead {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.85rem, 1vw, 0.9rem);
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--access-mute);
  margin: 0;
}

/* ============================================================
 * ⑤ CTA bar
 * ============================================================ */
.access-cta {
  padding-block: clamp(4rem, 10vh, 7rem);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 169, 97, 0.10) 0%, transparent 60%),
    var(--access-bg-2);
}

.access-cta__inner {
  max-width: 720px;
}

.access-cta__title {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0.14em;
  line-height: 1.6;
  margin: 0 0 1rem;
  color: var(--access-ink);
}

.access-cta__lead {
  font-family: var(--font-serif-jp);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  line-height: 2;
  color: var(--access-mute);
  margin: 0 0 2.5rem;
}

.access-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* .koura-cta tokens — base styles live in header-footer.css. */
.access-page {
  --cta-ink:  var(--access-ink);
  --cta-gold: var(--access-gold);
  --cta-bg:   var(--access-bg-1);
}

/* CTA 内の関連ページ導線（#6）。 */
.access-cta__links {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.4rem;
  font-family: var(--font-serif-jp);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.access-cta__links-label {
  color: var(--access-mute);
  letter-spacing: 0.14em;
}

.access-cta__links a {
  color: var(--color-gold-text);
  text-decoration: none;
  border-bottom: 1px solid var(--access-line);
  padding-bottom: 0.15rem;
  transition: color 0.3s var(--ease-out, ease), border-color 0.3s var(--ease-out, ease);
}

.access-cta__links a:hover,
.access-cta__links a:focus-visible {
  color: var(--color-gold-strong);
  border-bottom-color: var(--color-gold-strong);
}

/* ============================================================
 * Hero scroll anchor（#19）— 世界観を壊さず実用導線を1つ
 * ============================================================ */
.access-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  color: #faf8f3;
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  opacity: 0.92;
  transition: opacity 0.3s var(--ease-out, ease), gap 0.3s var(--ease-out, ease);
}

.access-hero__scroll:hover,
.access-hero__scroll:focus-visible {
  opacity: 1;
  gap: 0.9rem;
}

.access-hero__scroll-arrow {
  position: relative;
  width: 1px;
  height: 1.4rem;
  background: currentColor;
}

.access-hero__scroll-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

/* ============================================================
 * 地図のスクロールトラップ対策（#10）— タッチ端末のみタップで有効化
 * ============================================================ */
.access-info__map-cover {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .access-info__map-cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    border: 0;
    cursor: pointer;
    background: linear-gradient(180deg, transparent 60%, rgba(8, 8, 10, 0.35) 100%);
    color: #faf8f3;
    font-family: var(--font-serif-jp);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }
  .access-info__map-wrap:not(.is-map-active) iframe {
    pointer-events: none;
  }
  .access-info__map-wrap.is-map-active .access-info__map-cover {
    display: none;
  }
}

/* モバイル固定CTAは footer.php の全ページ共通バー(.koura-cta-bar)へ統合。
 * 下部余白・TOPボタンの被り回避は header-footer.css / footer.php 側で全ページ一括管理。 */

@media (prefers-reduced-motion: reduce) {
  .access-hero__scroll,
  .access-cta__links a,
  .access-info__map-links a {
    transition: none;
  }
}