/* ============================================================
   Premier 卓越理財餐飲 — colour palette + KV
   Palette extracted from image/fixed-kv-with-card.png
   (see image/palette-extracted.png for swatches)
   ============================================================ */
:root {
  /* neutrals (dark -> light) */
  --premier-ink: #0f0e0c; /* deepest background              */
  --premier-charcoal: #242424; /* primary dark surface (KV base)  */
  --premier-graphite: #39393a; /* raised cards / panels           */
  --premier-steel: #535354; /* borders / dividers              */
  --premier-silver: #838383; /* muted text on dark              */
  --premier-mist: #c8c8c8; /* secondary text on dark          */
  --premier-white: #f4f1ec; /* warm off-white headings         */

  /* warm + brand accents */
  --premier-espresso: #231c13; /* warm dark brown (kitchen)       */
  --premier-amber: #ca5426; /* food / warmth accent            */
  --premier-gold: #c8a24b; /* champagne gold — premier accent */
  --premier-red: #db0011; /* HSBC brand red — CTAs           */

  /* scrims for overlaying text on imagery */
  --premier-scrim-left: linear-gradient(
    90deg,
    rgba(15, 14, 12, 0.88) 0%,
    rgba(15, 14, 12, 0.45) 42%,
    rgba(15, 14, 12, 0) 70%
  );
  --premier-scrim-bottom: linear-gradient(
    0deg,
    rgba(15, 14, 12, 0.92) 0%,
    rgba(15, 14, 12, 0) 60%
  );
}

/* use Noto Sans TC for ALL Premier text (Latin + Chinese), overriding the
   site default of "Open Sans, Noto Sans TC" so Latin glyphs also use Noto Sans TC */
.premier-kv,
.premier-content,
.premier-modal {
  font-family: "Noto Sans TC", sans-serif;
}

/* ---- KV hero ---- */
.premier-kv {
  position: relative;
  width: 100%;
  background: var(--premier-ink);
  line-height: 0;
}
.premier-kv__img {
  display: block;
  width: 100%;
  height: auto;
}
/* <picture> wrappers (used to swap in the mobile KV / curve assets) must be
   block + full width so the inner <img width:100%> fills correctly */
.premier-kv picture,
.premier-curve picture {
  display: block;
  width: 100%;
  line-height: 0;
}
/* aspect-ratio box holding the curve + heading. Anchored to the KV bottom and
   sized to the shape's native ratio (1918x562) so its height scales with width.
   Because the heading is positioned as a % of THIS box, it tracks the curve on resize. */
.premier-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px; /* tuck under the KV; matches .premier-content margin-top:-35px */
  width: 100%;
  /* aspect-ratio: 1918 / 562; */
  z-index: 2;
  pointer-events: none;
}
/* design shape (transparent top, dark curve at bottom) — fills the curve box */
.premier-kv__shape {
  display: block;
  width: 100%;
  height: auto;
}
/* optional overlay layer: put text/buttons on top of the KV here.
   .premier-kv__overlay { position:absolute; inset:0; background:var(--premier-scrim-left); } */
.premier-kv__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 6% 6%;
  /* background: var(--premier-scrim-left); */ /* enable if you add text here */
}

/* ---- content area below the KV (background design over #363636) ---- */
.premier-content {
  background-color: #363636;
  background-image:
    /* top 80px = solid #363636 spacing (also bridges the curve), then fade into the texture */
    linear-gradient(
      to bottom,
      #363636 0px,
      #363636 80px,
      rgba(54, 54, 54, 0) 240px
    ),
    url("/premier_dining/image/background-design.png");
  background-repeat: no-repeat, no-repeat;
  /* image: -350px crop + 80px gap = -270px, so the cut edge sits 80px below the top */
  background-position:
    center top,
    center -270px;
  background-size:
    100% auto,
    100% auto;
  min-height: 800px; /* placeholder height until real content is added */
  margin-top: -35px; /* match the KV shape's bottom:-40px so it tucks under the curve */
  position: relative;
  /* no z-index here: keep this in the root stacking context so the curve (z-index:2)
     can overlap the section bg, while the heading (z-index:3) can sit on top of the curve */
}

/* ---- content section heading (臻選美饌 ...) ---- */
/* positioned inside .premier-curve as a % of its height, so it stays locked to the
   curve at any viewport width (was top:-140px fixed px, which drifted on resize) */
.premier-heading {
  position: absolute;
  top: 60.8%; /* % of .premier-curve height — adjust to slide up/down along the curve */
  left: 0;
  right: 0;
  z-index: 1; /* above the shape img within the .premier-curve stacking context */
  text-align: center;
  padding: 0 24px;
}
.premier-heading__title-img {
  display: block;
  margin: 0 auto;
  width: clamp(240px, 26vw, 360px); /* native asset is 337px wide */
  height: auto;
}
.premier-heading__subtitle-img {
  display: block;
  margin: 18px auto 0;
  width: clamp(280px, 55vw, 760px); /* responsive; native asset is 879px wide */
  height: auto;
}
/* mobile combined heading image — hidden on desktop, shown at the mobile breakpoint */
.premier-heading__mobile-img {
  display: none;
}

/* ---- restaurant card grid ---- */
.rest-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 85px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 88px;
}
.rest-card {
  color: var(--premier-white);
}
.rest-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 172 / 117; /* uniform photo height so the text rows align across all cards */
  object-fit: cover;
  border-radius: 20px;
}
.rest-card__body {
  padding: 0 18px; /* inset the text from the photo edges — adjust to taste */
}
.rest-card__michelin {
  color: var(--premier-gold);
  font-size: 13px;
  letter-spacing: 0.04em;
  min-height: 19px; /* reserved slot so hotel/name/divider/discount align across all cards */
  line-height: 19px;
  margin: 22px 0 0;
}
.rest-card__hotel {
  color: var(--premier-white);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 6px 0 8px;
}
.rest-card__name {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
}
.rest-card__divider {
  height: 1px;
  border: 0;
  background: #c4aa85;
  margin: 0 0 16px;
}
.rest-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rest-card__discount {
  color: var(--premier-mist);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.rest-card__discount b {
  color: var(--premier-gold);
  font-size: 26px;
  font-weight: 600;
}
a.rest-card__plus {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #ecbc5f;
  color: #ecbc5f;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.15s ease;
}
a.rest-card__plus svg {
  display: block;
  width: 16px; /* SVG plus centers reliably (the text glyph didn't sit centered) */
  height: 16px;
}
a.rest-card__plus:hover {
  background: #ecbc5f;
  color: var(--premier-ink);
}
@media (max-width: 900px) {
  .rest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* phones render at the forced 640px viewport (see head.php) → 760 catches them */
@media (max-width: 760px) {
  .rest-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- All Dining Offers section (same card design + region tabs) ---- */
.premier-offers {
  /* in-flow block inside .premier-content — shares the same continuous background (no own bg) */
  padding-top: 8px;
}
.premier-offers__head {
  text-align: center;
}
.premier-offers__head picture {
  display: inline-block; /* centers the <picture> wrapper via the head's text-align */
}
.premier-offers__title {
  display: block;
  margin: 0 auto;
  width: clamp(260px, 42vw, 600px); /* native asset is 604px wide */
  height: auto;
}
.region-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}
.region-tab {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.region-tab img {
  height: 42px;
  width: auto;
}
.region-tab__off {
  display: block;
}
.region-tab__on {
  display: none;
}
.region-tab.is-active .region-tab__on {
  display: block;
}
.region-tab.is-active .region-tab__off {
  display: none;
}
/* this section's grid follows the head in normal flow, so it doesn't need the
   large top padding the first section uses to clear its absolute heading */
.premier-offers .rest-grid {
  padding-top: 85px;
}
/* only the active region's grid is shown (must come after .rest-grid's display:grid) */
.region-panel {
  display: none;
}
.region-panel.is-active {
  display: grid;
}

/* ---- example themed section (demonstrates the palette) ---- */
.premier-section {
  background: var(--premier-charcoal);
  color: var(--premier-mist);
  padding: 64px 24px;
  text-align: center;
}
.premier-section__title {
  color: var(--premier-white);
  font-size: 30px;
  letter-spacing: 0.3em;
  margin: 0 0 12px;
}
.premier-section__title span {
  color: var(--premier-gold);
}
.premier-section__sub {
  color: var(--premier-silver);
  letter-spacing: 0.15em;
  margin: 0 0 32px;
}

/* ---- buttons drawn from the palette ---- */
.premier-btn {
  display: inline-block;
  padding: 14px 40px;
  background: var(--premier-red);
  color: #fff;
  border-radius: 4px;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: 0.15s ease;
}
.premier-btn:hover {
  background: #b8000e;
}
.premier-btn--gold {
  background: var(--premier-gold);
  color: var(--premier-ink);
}
.premier-btn--gold:hover {
  background: #b88f3c;
}
.premier-btn--ghost {
  background: transparent;
  border: 1px solid var(--premier-steel);
  color: var(--premier-white);
}
.premier-btn--ghost:hover {
  border-color: var(--premier-gold);
  color: var(--premier-gold);
}

/* ============================================================
   Restaurant detail popup (modal) — opened by each card's "+"
   ============================================================ */
body.pm-open {
  overflow: hidden; /* lock background scroll while the modal is open */
}
.premier-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* symmetric vertical padding so the (margin:auto) dialog is exactly centered;
     72px top also clears the close button when the dialog overflows and scrolls */
  padding: 72px 24px;
  overflow: auto; /* the modal itself scrolls if the dialog is taller than the viewport */
}
.premier-modal[hidden] {
  display: none; /* override the flex display when closed */
}
.premier-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.premier-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  /* center in the viewport (both axes); auto margins override align-items and stay
     scroll-safe — when the dialog is taller than the screen it sits at the top and
     the modal scrolls, instead of clipping the top like align-items:center would */
  margin: auto;
}
.premier-modal__close {
  position: absolute;
  top: -65px;
  right: 0;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s ease;
}
.premier-modal__close svg {
  display: block;
  width: 28px; /* X size inside the 57px circle */
  height: 28px;
}
.premier-modal__close:hover {
  background: #fff;
  color: #2a2520;
}
/* the off-white card: warm base + the two line-texture assets (top-left, bottom-right) */
.premier-modal__card {
  position: relative;
  overflow: hidden;
  background-color: #fffdfb;
  background-image:
    /* texture-top.png top-left, texture-bottom.png bottom-right */
    url("/premier_dining/image/popup/texture-top.png"),
    url("/premier_dining/image/popup/texture-bottom.png");
  background-repeat: no-repeat, no-repeat;
  background-position:
    left top,
    right bottom;
  background-size:
    auto 92%,
    62% auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.premier-modal__grid {
  display: grid;
  /* match reference popup內容2.png: text 464 / image 622 of the 1086 card (≈ 42.7% / 57.3%) */
  grid-template-columns: 464fr 623fr;
  align-items: stretch;
}
/* left info column */
.premier-modal__info {
  padding: 54px 46px 38px;
  text-align: left;
}
.premier-modal__hotel {
  text-align: center;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}
.premier-modal__name {
  text-align: center;
  color: #000000;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0 0 32px;
}
/* short centered divider between the name and the offer line (ref: 1px #bebebe) */
.premier-modal__rule {
  width: 120px;
  height: 1px;
  border: 0;
  background: #bebebe;
  margin: 0 auto 32px;
}
.premier-modal__highlight {
  text-align: center;
  color: #3a3530;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.premier-modal__highlight b {
  color: #c8a24b;
  font-size: 28px;
  font-weight: 700;
}
.premier-modal__note {
  text-align: center;
  color: #c08a3e;
  font-size: 15px;
  line-height: 1.2;
  margin: 22px 0; /* equal spacing above and below (top margin overrides the highlight's smaller bottom margin via collapsing) */
  white-space: pre-line; /* honour the \n in the note text → forced line break after 或 */
}
/* the leading "*" hangs to the left with zero width, so it doesn't shift the
   centered note text (line 1 centers on its text, matching line 2) */
.premier-modal__note .note-star {
  display: inline-block;
  width: 0;
  position: relative;
  left: -0.65em;
}
.premier-modal__desc {
  font-size: 15px;
  line-height: 1.95;
  text-align: justify;
  margin: 0 30px 26px;
}
.premier-modal__contacts {
  list-style: none;
  margin: 0 30px 0px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 27px;
}
.pm-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.pm-contact__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: block; /* gold-circle icon image (1/2/3.png) — already includes the ring */
}
.pm-contact a {
  color: #c8a24b;
  text-decoration: underline;
}
.pm-contact a:hover {
  color: #a9852f;
}
/* right photo column — fills its cell, clipped by the card's rounded corners */
.premier-modal__media {
  position: relative;
  min-height: 100%;
}
.premier-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* expandable 注意事項 (T&C) — toggle sits at the bottom of the left info column
   (bottom-left of the photo); the body opens full-width below the photo row */
.premier-modal__tc-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 0px;
  background: none;
  border: 0;
  padding: 0px 30px 0;
  cursor: pointer;
  color: #a57943; /* collapsed: "＋ 展開" */
  font-size: 20px;
  letter-spacing: 0.12em;
}
.premier-modal__tc-toggle[aria-expanded="true"] {
  color: #4d4d4d; /* expanded: "－ 收合" */
}
.premier-modal__tc-body {
  padding: 4px 46px 44px;
  /* +30px each side so the 注意事項 content lines up with the desc/contacts above
     (which sit at info-padding 46 + margin 30); applies on mobile too (26 + 30) */
  margin-left: 30px;
  margin-right: 30px;
}
.premier-modal__tc-sign {
  flex: none;
  width: 20px;
  height: 20px;
  color: inherit; /* SVG stroke=currentColor follows the toggle colour (展開 #a57943 / 收合 #4d4d4d) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.premier-modal__tc-sign svg {
  display: block;
  width: 18px;
  height: 18px;
}
.premier-modal__tc-sign svg path {
  stroke-width: 4px; /* 4px-wide plus/minus strokes */
  vector-effect: non-scaling-stroke; /* render exactly 4px regardless of viewBox scaling */
}
/* expanded → hide the vertical stroke so the slim "+" becomes a slim "−" (收合) */
.premier-modal__tc-toggle[aria-expanded="true"] .tc-sign__v {
  display: none;
}
.premier-modal__tc-rule {
  flex: 1;
  height: 1px;
  background: #c49153;
}
.premier-modal__tc-title {
  color: #c08a3e;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 6px 0 14px;
}
/* numbered terms via a counter (the site's global reset sets list-style:none),
   with a hanging indent so wrapped lines align under the text, not the number */
.premier-modal__tc-list {
  counter-reset: tc;
  list-style: none;
  margin: 0;
  padding-left: 0;
  font-size: 12.5px;
  line-height: 1.95;
}
.premier-modal__tc-list li {
  counter-increment: tc;
  position: relative;
  padding-left: 1.9em;
  margin-bottom: 1px;
}
.premier-modal__tc-list li::before {
  content: counter(tc) ".";
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 760px) {
  .premier-modal {
    padding: 75px 90px; /* symmetric vertical → dialog centers on mobile too */
  }
  .premier-modal__grid {
    grid-template-columns: 1fr;
  }
  .premier-modal__media {
    order: -1; /* photo moves to the top of the stacked card */
    aspect-ratio: 3 / 2;
    height: auto;
    min-height: 0;
  }
  /* photo is full-width on top, so the top-left line art would hide behind it —
     keep only the bottom-right texture on the card... */
  .premier-modal__card {
    background-image: url("/premier_dining/image/popup/texture-bottom.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 80% auto;
  }
  /* ...and move the top-left line art onto the info panel so it begins right
     after (below) the restaurant photo, not behind it */
  .premier-modal__info {
    padding: 32px 26px 26px;
    background-image: url("/premier_dining/image/popup/texture-top.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 70% auto;
  }
  .premier-modal__tc-body {
    padding: 4px 26px 32px;
  }
  .premier-modal__hotel {
    font-size: 18px;
    margin: 0px;
  }
  .premier-modal__name {
    font-size: 50px;
    font-weight: 400;
    letter-spacing: 0.04em;
  }
  .premier-modal__desc {
    line-height: 2.5;
  }
}

/* ---- mobile (phone) page treatment: mobile KV / curve / background ----
   NOTE: head.php forces the phone viewport to width=640px, so the mobile
   breakpoint must be >640 (760) — a 600px breakpoint never matches a phone. */
@media (max-width: 760px) {
  /* constrain the offers header (title + tabs) to the card image width
     (same 90px side inset as the grid) so it lines up with the cards below */
  .premier-offers__head {
    padding-left: 90px;
    padding-right: 90px;
  }
  /* spread the 北部/中部/南部 pills across that card width */
  .region-tabs {
    gap: 10px;
  }
  .region-tab img {
    height: 47px;
  }
  /* first heading: swap the two desktop images for the single combined mobile title */
  .premier-heading {
    top: 78%; /* mobile: sit the heading lower so it clears the curve into the dark band */
  }
  .premier-heading__title-img,
  .premier-heading__subtitle-img {
    display: none;
  }
  .premier-heading__mobile-img {
    display: block;
    margin: 0 auto;
    width: clamp(240px, 62vw, 331px); /* native asset is 331px wide */
    height: auto;
  }
  /* second heading: smaller mobile "All Dining Offers" title (native 216px) */
  .premier-offers__title {
    width: clamp(180px, 41vw, 260px);
  }
  /* inset the cards more from the screen edges (24px looked near full-bleed) */
  .rest-grid {
    padding-left: 90px;
    padding-right: 90px;
  }
  /* first grid only: extra top space so cards clear the (taller) combined
     mobile heading that sits absolutely on the curve */
  .premier-content > .rest-grid {
    padding-top: 180px;
  }
  /* card typography scaled up to match reference2 on the 640 mobile canvas */
  .rest-card__body {
    /* photo→text top gap matches the inter-card gap (grid row-gap 64px) so every
       photo has equal breathing room above and below; 36px side inset */
    padding: 64px 36px 0;
    position: relative; /* anchor the floating Michelin tag */
  }
  /* Michelin tag floats in the photo→hotel gap, ignoring the body's top padding,
     so the hotel/name sit at the same 64px spot whether or not a card has a tag */
  .rest-card__michelin {
    position: absolute;
    top: 38px;
    left: 36px;
    right: 36px;
    margin: 0;
    font-size: 18px;
    min-height: 0;
  }
  .rest-card__michelin:empty {
    display: none;
  }
  .rest-card__hotel {
    font-size: 18px;
    margin: 0px;
  }
  .rest-card__name {
    font-size: 33px;
    margin-bottom: 25px;
  }
  .rest-card__discount {
    font-size: 22px;
  }
  .rest-card__discount b {
    font-size: 32px;
  }
  a.rest-card__plus {
    width: 40px;
    height: 40px;
  }
  a.rest-card__plus svg {
    width: 18px;
    height: 18px;
  }
  .premier-content {
    /* swap the desktop texture for the tall mobile background art, bridged under the curve */
    background-image:
      linear-gradient(
        to bottom,
        #363636 0px,
        #363636 60px,
        rgba(54, 54, 54, 0) 190px
      ),
      url("/premier_dining/image/mobile/background-design.png");
    background-position:
      center top,
      center top;
    background-size:
      100% auto,
      100% auto;
    background-repeat: no-repeat, repeat-y;
    margin-top: 0px;
  }
}