/* ACCESS page — layout only; components come from style.css */

.hours-card__small, .tip__body { word-break: auto-phrase; }

/* ---------- hero ---------- */
.access-hero { padding-top: clamp(40px, 6.1vw, 88px); }
.access-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.access-hero__text { display: grid; gap: 21px; justify-items: start; }
.access-hero__title { margin-block: 3px; }
.access-hero__sticker { --size: clamp(180px, 18vw, 260px); --rot: 10deg; font-size: calc(var(--size) * 0.125); margin-right: 20px; }

/* ---------- hours ---------- */
.hours__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.hours-card { border: var(--border); border-radius: 24px; padding: clamp(24px, 2.8vw, 40px); display: grid; align-content: start; }
.hours-card--open { background: var(--kindai-bg); color: var(--kindai-ink); box-shadow: var(--shadow-lg); }
.hours-card__label { font-size: 14px; margin-bottom: 4px; }
.hours-card__big { font-family: var(--font-display); line-height: 1.1; }
.hours-card--open .hours-card__big { font-size: clamp(44px, 5.56vw, 80px); }
.hours-card--closed .hours-card__big { font-size: clamp(32px, 3.9vw, 56px); margin-top: 2px; }
.hours-card__note { font-weight: 700; font-size: 18px; line-height: 1.4; margin-top: 6px; }
.hours-card__plus { font-weight: 900; font-size: clamp(22px, 2.22vw, 32px); line-height: 1.3; margin-top: 8px; }
.hours-card__small { font-size: 16px; line-height: 1.7; margin-top: 12px; }

.week { display: flex; align-items: center; gap: 12px; margin-top: 39px; }
.week .label { font-size: 13px; }
.week__days { display: flex; gap: 12px; }
.week__days li {
  width: 56px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-label); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; line-height: 1;
}
.week__days li.is-open { background: var(--ink); color: var(--cream); }

/* ---------- location ---------- */
.location {
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 32fr); column-gap: clamp(32px, 4.45vw, 64px);
  grid-template-areas: "map ." "map head" "map body" "map .";
  grid-template-rows: 1fr auto auto 1fr;
}
.location__head { grid-area: head; }
.location__map { grid-area: map; align-self: center; aspect-ratio: 720 / 500; border: 3px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--cream); }
.location__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.location__body { grid-area: body; display: grid; gap: 29px; justify-items: start; margin-top: 30px; }
.loc-list { display: grid; gap: 28px; letter-spacing: 0; }
.loc-list li { display: flex; align-items: flex-start; gap: 16px; }
.loc-list__icon { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; flex: none; }
.loc-list__icon .icon { width: 20px; height: 20px; }
.loc-list__main { font-weight: 700; font-size: 18px; line-height: 1.5; }
.loc-list__sub { font-size: 15px; line-height: 1.75; }

/* ---------- before you go ---------- */
.tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: clamp(32px, 3.33vw, 48px); }
.tip { border: var(--border); border-radius: 24px; box-shadow: var(--shadow); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.tip--yellow { background: var(--pec-bg); color: var(--pec-ink); }
.tip--lavender { background: var(--teriyaki-bg); color: var(--teriyaki-ink); }
.tip--pink { background: var(--hot-bg); color: var(--hot-ink); }
.tip__num { font-family: var(--font-display); font-size: 56px; line-height: 1; }
.tip__title { font-family: var(--font-label); font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: 0.08em; margin-top: 15px; }
.tip__body { font-weight: 700; font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; margin-top: 13px; }
.tip__btn { margin-top: 14px; }

/* ---------- tablet & below ---------- */
@media (max-width: 899px) {
  .location { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "body"; grid-template-rows: none; }
  .location__map { margin-top: 32px; }
  .location__body { margin-top: 28px; gap: 28px; }

  .tips { grid-template-columns: minmax(0, 1fr); }
  .tip { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; justify-items: start; }
  .tip__title { margin-top: 0; }
  .tip__body, .tip__btn { grid-column: 1 / -1; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .access-hero__text { gap: 18px; }
  .access-hero__title { margin-block: 0; }
  .access-hero__sticker { display: none; }
  .access-hero .lead { font-size: 15px; font-weight: 500; line-height: 2; }

  .hours { padding-top: 56px; }
  .hours__cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hours-card { border-radius: 20px; }
  .hours-card__label { font-size: 12px; margin-bottom: 3px; }
  .hours-card__note { font-size: 15px; line-height: 1.85; margin-top: 2px; }
  .hours-card--closed .hours-card__big { margin-top: 7px; }
  .hours-card__plus { margin-top: 12px; }
  .hours-card__small { font-size: 13px; margin-top: 9px; }
  .hours-card__small, .loc-list__sub { color: rgb(27 15 12 / 0.75); }

  .week { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 16px; }
  .week__days { gap: 6px; max-width: 100%; }
  .week__days li { width: 44px; min-width: 0; font-size: 11px; } /* shrinks below 44px on ≤360px screens */
  .week__days li:not(.is-open) { color: rgb(27 15 12 / 0.62); } /* Figma 45% would be ~2.9:1 */

  .location__map { aspect-ratio: 350 / 238; }
  .br-wide { display: none; }
  .loc-list { gap: 27px; }
  .loc-list li { gap: 14px; }
  .loc-list__icon { width: 40px; height: 40px; }
  .loc-list__main { font-size: 16px; }
  .loc-list__sub { font-size: 12px; line-height: 1.7; }

  /* mobile Figma drops the card buttons */
  .tip { border-radius: 20px; padding: 28px 24px 24px; column-gap: 12px; }
  .tip__num { font-size: 36px; }
  .tip__title { font-size: 15px; }
  .tip__body { margin-top: 10px; letter-spacing: 0.02em; }
  .tip__btn { display: none; }
}