/* ==========================================================================
   p89 — StarWorld Hotel Exclusive Dining Offers
   Values taken from Figma: chi 2766:2 / en 2766:492 (970 x 2775)
   ========================================================================== */

:root {
  --page-width: 970px;
  /* Figma grid row is 890 (3 x 286 + 2 x 16). +4 of slack so sub-pixel
     rounding can never wrap the third card onto its own row. */
  --content-width: 894px;

  /* brand */
  --green: #055541;        /* Hang Seng "+fun green" — title, restaurant names */
  --gold: #d59459;         /* StarWorld / Galaxy gold — title accent */
  --gold-heading: #9a7a5f; /* Designated Restaurants heading */
  --body: #515452;         /* intro paragraph */

  /* page background: Figma is #e4f0da -> #efecce at 50% opacity over white.
     Pre-blended here so we don't stack an opacity layer. */
  --bg-from: #f1f7ec;
  --bg-to: #f7f5e6;

  /* card */
  --card-w: 286px;
  --card-head-h: 60px;
  --logo-size: 44px;
  --photo-w: 240px;
  --photo-h: 170px;
  --radius-photo: 40px;

  /* rhythm */
  --gap-section: 24px;

  --f-main: 'Noto Sans TC', 'Noto Sans HK', sans-serif;
  --f-note: 'Noto Sans HK', 'Noto Sans TC', sans-serif;
}

html[lang="zh-cn"] {
  --f-main: 'Noto Sans SC', sans-serif;
  --f-note: 'Noto Sans SC', sans-serif;
}

/* ---------- shell ---------- */

#wrap {
  min-width: 0;
  background: none;
}

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  /* Figma: the cream gradient (bg 2766:3) starts under the hero at y=485 and
     runs to the bottom of the frame at y=2775 -- it is behind the notes, the
     T&C and the statement too, not just .p89_content. The hero image covers
     the top of it, so the page never actually shows cream above y=485. */
  background-color: #fff;
  background-image: linear-gradient(180deg, var(--bg-from) 0%, var(--bg-to) 100%);
}

.hero {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; /* 485 / 970 */
  overflow: hidden;
}

.hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- content ---------- */

.p89_content {
  /* gradient lives on .page -- see the note there */
  /* Figma: hero ends 485, first block starts 511; last block ends 2373.9,
     footer starts 2408. */
  padding: 26px 0 34px;
}

.p89_main {
  box-sizing: border-box;
  /* +32 so the inner box is exactly --content-width; the 890px grid row
     (3 x 286 + 2 x 16) must not be eaten by the side padding. */
  max-width: calc(var(--content-width) + 32px);
  margin: 0 auto;
  padding: 0 16px;
  font-family: var(--f-main);
  text-align: center;
}

/* 24px between every block -- Figma runs a uniform 24 gap down the whole
   stack. Rules below must only ever set margin-bottom; a `margin` shorthand
   here silently wins on source order and kills the gap. */
.p89_main > * + * {
  margin-top: var(--gap-section);
}

.p89_main img {
  max-width: 100%;
  height: auto;
}

.p89_cards_row img { width: 341px; }

.p89_title {
  margin-bottom: 0;
  /* CMS promo_main.css sets `h1,h2,h3 { font-family: Arial... !important }`.
     Only !important can take the title back. */
  font-family: var(--f-main) !important;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.44; /* Figma title box 52 / 36 */
  color: var(--green);
}

.p89_title_a { color: var(--green); }
.p89_title_b { color: var(--gold); }

.p89_intro {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  max-width: 700px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--body);
}

html[lang="zh-hk"] .p89_intro,
html[lang="zh-cn"] .p89_intro { max-width: 520px; }

.p89_offers img { width: 628px; }

/* CHI/SC offer copy is shorter, so the exported box is narrower (Figma 571.76 vs 628.26) */
html[lang="zh-hk"] .p89_offers img,
html[lang="zh-cn"] .p89_offers img { width: 571px; }

.p89_divider img { width: 546px; }

/* the divider under the grid is tighter than the standard 24px rhythm */
.p89_grid + .p89_divider { margin-top: 12px; }

.p89_rest_heading {
  margin-bottom: 0;
  font-size: 0; /* wrapper only — heading is an exported badge */
}

.p89_rest_heading img { width: 192px; }

.p89_fun {
  margin-top: 32px;
}

.p89_fun img { width: 550px; }

/* ---------- restaurant grid ----------
   Desktop 3 / 3 / 3 / 2 with the last row centred; Figma rows sit at
   y = 0 / 242 / 484 / 726 in an 890 container, so row gap = 12, col gap = 16
   (3 x 286 + 2 x 16 = 890). Flex wrap centres the short last row for free,
   and on mobile it centres the 11th card the same way. */

.p89_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.p89_card {
  width: var(--card-w);
  margin: 0;
  list-style: none;
}

.p89_card_head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--card-head-h);
  padding: 0 8px;
}

.p89_logo {
  flex: 0 0 var(--logo-size);
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
}

.p89_name {
  font-family: var(--f-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--green);
  /* names that wrap (e.g. "Passion. by Gerard Dubois") must stay centred
     under the logo, not ragged-left */
  text-align: left;
  justify-content: center;

}

/* one-off fit exception carried over from the design */
.p89_name_tight {
  letter-spacing: -1px;
  text-align: center;
}

.p89_photo {
  display: block;
  width: var(--photo-w);
  height: var(--photo-h);
  margin: 0 auto;
  object-fit: cover;
  border-radius: var(--radius-photo) 0 var(--radius-photo) 0;
}

/* ---------- footer ---------- */

/* let the .page gradient through -- the CMS paints #footer white */
#footer {
  background: none;
}

/* Gutters follow p88 / hasehospital: cap the row at 930 and let the CMS keep
   its own side padding (8px #footer .row + 15px .columns on desktop, 5 + 10
   under 970px). Zeroing them -- as this page used to -- left the notes and the
   T&C flush against the screen edge on mobile. */
#footer .footer_bot_area,
#footer .footer_state_area {
  max-width: 930px;
  margin-right: auto;
  margin-left: auto;
}

/* T&C toggle: the CMS ships it as a grey pill floated right. Figma has it
   plain, underlined and left-aligned, flush with the notes above it. */
.hidden .btn_tnc,
.hidden .btn_tnc:focus {
  float: left !important;
  background: none !important;
  padding-right: 0;
  padding-left: 0 !important;
  font-family: var(--f-note);
  font-size: 11px;
  font-weight: normal;
  line-height: 30px;
  color: #000 !important;
  text-decoration: underline;
}

/* CMS uses a sprite for the +/- affordance; replace it with a chevron */
.hidden .btn_tnc:after {
  content: '' !important;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-bottom: 3px;
  margin-left: 8px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: none !important;
  text-indent: 0 !important;
  vertical-align: middle;
  transform: rotate(45deg);
}

.hidden .btn_tnc.expanded:after {
  margin-bottom: -1px;
  transform: rotate(-135deg);
}

.hidden.tnc .content {
  clear: both;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  font-family: var(--f-note);
  font-size: 11px;
  line-height: 1.6;
  color: #000 !important;
}

.hidden.tnc .content > ol {
  margin: 8px 0;
  padding-left: 18px;
}

.hidden.tnc .content ol li { margin-bottom: 4px; }

.p89_notes {
  font-family: var(--f-note);
  font-size: 11px;
  line-height: 14.3px;
  color: #000;
  text-align: left;
}

.p89_notes .nt {
  margin: 0 0 4px;
  font-weight: 700;
}

.p89_notes ol {
  margin: 0;
  padding-left: 1.6em;
}

.p89_notes li { margin-bottom: 2px; }

.p89_lending {
  margin: 12px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  text-align: left;
}

/* T&C restaurant table — Foundation paints tbody #fefefe / even rows #f1f1f1.
   Clear those so the cream page gradient shows through. */
.tnc_table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 11px;
}
.tnc_voucher_table { table-layout: fixed; }
.tnc_voucher_table th:nth-child(1),
.tnc_voucher_table td:nth-child(1) { width: 50%; }
.tnc_table,
.tnc_table thead,
.tnc_table tbody,
.tnc_table tfoot,
.tnc_table tr,
.tnc_table th,
.tnc_table td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
.tnc_table tr,
.tnc_table th,
.tnc_table td {
  border: 1px solid #ccc;
  padding: 10px 15px;
  text-align: left;
  vertical-align: top;
}
.tnc_table th { font-weight: bold; }
.tnc_table td:first-child {
  width: 120px;
  text-align: center;
  vertical-align: middle;
}

/* ---------- mobile ----------
   11 restaurants -> 2 columns = 5 rows + a centred orphan. */

@media (max-width: 640px) {
  .p89_content { padding: 24px 0 32px; }

  .p89_main { padding: 0 12px; }

  .p89_title { font-size: 24px; }

  .p89_intro { font-size: 14px; line-height: 18px; }

  /* No width override here on purpose. These are exported PNGs with a design
     width (341 / 571 / 546 / 550) and `.p89_main img { max-width: 100% }`
     already shrinks them to fit a narrow column. Forcing `width: 100%` only
     ever scaled them UP -- at a 532px window the 341px card strip was being
     stretched to 508px. */

  .p89_rest_heading img { width: 150px; }

  .p89_grid { gap: 12px 12px; }

  .p89_card { width: calc(50% - 6px); }

  .p89_card_head {
    gap: 4px;
    padding: 0 4px;
    min-height: 52px;
  }

  .p89_logo {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .p89_name { font-size: 15px; }

  .p89_photo {
    /* keep the desktop photo-to-card ratio (240 of 286); at 100% the image
       filled the whole card and read far too big next to the name */
    width: 84%;
    height: auto;
    aspect-ratio: 240 / 170;
    border-radius: 24px 0 24px 0;
  }
}