/* ============================================================
   WMC House — custom pages
   Landing and editorial pages outside the 17-page standard.
   Loaded by template-custom.php only. Tokens only, same as the
   rest of the theme; the medal gold and silver are the one
   literal, because they mean the medal on every brand.
   ============================================================ */

/* === Frame === */
/* The house green, not --dark: that token is the near-black under the hero. */
.cp { --cp-top: 64px; --cp-dark: var(--nav-bg); }
.cp [id] { scroll-margin-top: calc(var(--cp-top) + 48px); }
.cp .sec--dark { background: var(--cp-dark); color: var(--on-dark); }
.cp .sec--dark p { color: var(--on-dark-soft); }
.cp h2 { text-wrap: balance; margin: 0; }
.cp h3 { margin: 0; }
.cp .rule { margin-bottom: var(--s-4); }
.cp-lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; max-width: 56ch; }
.cp-stack { display: flex; flex-direction: column; gap: 1.4rem; }
.cp-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s-3); }
.cp-ph { position: relative; overflow: hidden; background: var(--cp-dark); }
.cp-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
article:hover > .cp-ph img { transform: scale(1.05); }
.cp-tag { position: absolute; left: .9rem; top: .9rem; padding: .45rem .6rem; color: var(--on-dark); background: color-mix(in srgb, var(--cp-dark) 60%, transparent); backdrop-filter: blur(4px); }
.cp-dish { font-size: 1.1rem; line-height: 1.25; }
.cp-dish__text { font-size: .9rem; line-height: 1.5; }

/* === The restaurant === */
.cp-resto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.25rem, 6vw, 5.5rem); align-items: center; }
.cp-collage { position: relative; aspect-ratio: 4 / 5; }
.cp-collage figure { position: absolute; overflow: hidden; box-shadow: 0 30px 60px color-mix(in srgb, var(--cp-dark) 28%, transparent); }
.cp-collage img { width: 100%; height: 100%; object-fit: cover; }
.cp-collage__a { inset: 0 22% 18% 0; }
.cp-collage__b { inset: 42% 0 0 38%; border: 8px solid var(--ground); }
.cp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
.cp-facts div { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.1rem 0 0; }
.cp-facts strong { font-family: var(--h2-family); font-weight: var(--h2-weight); font-stretch: var(--h2-wdth); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; }
.cp-facts span { color: var(--ink-soft); font-size: .8rem; }

/* === Day strip === */
.cp-day { position: sticky; top: var(--cp-top); z-index: 30; background: var(--cp-dark); color: var(--on-dark); border-block: 1px solid var(--rule-dark); }
.cp-day .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: .9rem; }
.cp-day__label { color: var(--on-dark-soft); }
.cp-day ol { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.cp-day li + li::before { content: "\2192"; margin-right: 2rem; color: var(--on-dark-soft); }
.cp-day a { font-family: var(--h3-family); font-weight: 700; font-stretch: var(--h3-wdth); font-size: 1rem; padding-bottom: .2rem; }
.cp-day a.is-on { box-shadow: 0 2px 0 var(--on-dark); }

/* === Heads and dish grids === */
.cp-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: end; margin-bottom: var(--s-4); }
.cp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.cp-acts + .cp-trio { margin-top: var(--s-5); }
.cp-head + div > .cp-rail-head { margin-top: 0; }
.cp-trio article, .cp-sig__card { display: flex; flex-direction: column; gap: .85rem; }
.cp-trio .cp-ph { aspect-ratio: 3 / 2; }
.cp-sig { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.cp-sig .cp-ph { aspect-ratio: 3 / 4; }

/* === Rails === */
.cp-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: clamp(3.5rem, 8vw, 6rem) 0 1.4rem; }
.cp-live { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-soft); }
.sec--dark .cp-live { color: var(--on-dark-soft); }
.cp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--social); box-shadow: 0 0 0 4px color-mix(in srgb, var(--social) 20%, transparent); }
.cp-arrows { display: flex; gap: .5rem; }
.cp-arrows button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--button); background: none; color: var(--button); font-size: 18px; cursor: pointer; transition: background .3s ease; }
.cp-arrows button:hover { background: color-mix(in srgb, var(--button) 12%, transparent); }
.sec--dark .cp-arrows button { border-color: color-mix(in srgb, var(--on-dark) 42%, transparent); color: var(--on-dark); }
.cp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 290px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .4rem; }
.cp-rail::-webkit-scrollbar { display: none; }
.cp-rail__card { display: flex; flex-direction: column; gap: .7rem; scroll-snap-align: start; }
.cp-rail__card .cp-ph { aspect-ratio: 3 / 2; }

/* === Upstairs === */
.cp-lounge { position: relative; min-height: 88vh; display: grid; align-items: center; overflow: hidden; background: var(--cp-dark); color: var(--on-dark); }
.cp-lounge > img { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.cp-lounge::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--cp-dark) 90%, transparent) 0%, color-mix(in srgb, var(--cp-dark) 55%, transparent) 48%, color-mix(in srgb, var(--cp-dark) 20%, transparent) 100%); }
.cp-lounge .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-4); align-items: center; padding-block: var(--s-6); }
.cp-lounge p { color: var(--on-dark-soft); }
.cp-lounge .btn { align-self: flex-start; }
.cp-clip { justify-self: end; width: min(340px, 100%); display: flex; flex-direction: column; gap: .75rem; padding: .9rem; background: color-mix(in srgb, var(--cp-dark) 60%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--rule-dark); }
.cp-clip video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--cp-dark); }

/* === Awards and press === */
.cp-press { text-align: center; }
.cp-awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: var(--s-5); }
.cp-award { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; min-width: min(320px, 100%); padding: 2.1rem 3rem; border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 80%, var(--ground)); }
.cp-award__by { color: var(--ink-soft); }
.cp-award strong { font-family: var(--h2-family); font-weight: 900; font-stretch: var(--h1-wdth); text-transform: uppercase; font-size: clamp(40px, 5vw, 60px); line-height: 1; background: linear-gradient(135deg, #987041, #C89B61 45%, #8a6435); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-award--silver strong { background-image: linear-gradient(135deg, #8d8f94, #d7d9dd 45%, #7c7e83); }
.cp-award__cat { font-family: var(--h3-family); font-weight: 700; font-size: 1.1rem; }
.cp-press h2 { max-width: 18ch; margin-inline: auto; }
.cp-press__lede { max-width: 52ch; margin: 1.1rem auto 0; color: var(--ink-soft); }
.cp-mast { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 2.75rem; margin-top: var(--s-4); }
.cp-mast span { font-weight: 800; font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .02em; white-space: nowrap; opacity: .82; }
.cp-mast .is-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cp-mast .is-it { font-family: Georgia, serif; font-style: italic; font-weight: 400; }

/* === Reviews: the homepage card, four across === */
.cp .rvw { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* === Plan and groups === */
.cp-plan { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.25rem, 6vw, 5rem); align-items: stretch; }
.cp-plan .cp-ph { min-height: 460px; }
.cp-facts-list { margin: var(--s-3) 0 0; border-top: 1px solid var(--rule); }
.cp-facts-list div { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.cp-facts-list dt { color: var(--ink-soft); padding-top: 2px; }
.cp-facts-list dd { margin: 0; }
.cp-note { margin-top: 1.4rem; color: var(--ink-soft); }
.cp-groups { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.25rem, 6vw, 5rem); align-items: center; }
.cp-groups .cp-ph { aspect-ratio: 4 / 3; }
.cp-groups .btn { align-self: flex-start; }

/* === Questions: native Details blocks, read back as FAQPage === */
.cp-faq__title { margin-bottom: var(--s-3); }
.cp-faq__list { columns: 2; column-gap: var(--s-5); }
.cp-faq__list .wp-block-details { break-inside: avoid; margin: 0; }
.cp-faq__list .wp-block-details a { text-decoration: underline; text-underline-offset: .18em; }

/* === Seminyak === */
.cp-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: var(--s-3); }
.cp-tip { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.cp-tip p { font-size: .95rem; }
.cp-tip__n { color: var(--ink-soft); }
.cp-tip--dark { padding: 1.4rem; border: 0; background: var(--cp-dark); color: var(--on-dark); }
.cp-tip--dark p, .cp-tip--dark .cp-tip__n { color: var(--on-dark-soft); }
.cp-tip--dark a { text-decoration: underline; text-underline-offset: .18em; }

/* === Close === */
.cp-final { position: relative; overflow: hidden; background: var(--cp-dark); color: var(--on-dark); text-align: center; }
.cp-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--cp-dark) 72%, transparent); }
.cp-final .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding-block: clamp(6rem, 14vw, 10.5rem); }
.cp-final__mark { width: 120px; height: auto; }
.cp-final p { max-width: 42ch; color: var(--on-dark-soft); }
.cp-final .cp-acts { justify-content: center; margin-top: .5rem; }

/* === Responsive === */
@media (max-width: 980px) {
	.cp-resto, .cp-plan, .cp-groups, .cp-head, .cp-lounge .wrap { grid-template-columns: 1fr; }
	.cp-head { gap: 1.25rem; }
	.cp-collage { max-width: 520px; }
	.cp-sig, .cp .rvw, .cp-tips, .cp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cp-facts { row-gap: 1.5rem; }
	.cp-faq__list { columns: 1; }
	.cp-clip { justify-self: start; }
	.cp-plan .cp-ph { min-height: 300px; }
}
@media (max-width: 600px) {
	.cp .rvw, .cp-tips, .cp-trio { grid-template-columns: 1fr; }
	.cp-sig { gap: .75rem; }
	.cp-day__label { display: none; }
	.cp-day .wrap { padding-block: .75rem; }
	.cp-day ol { flex-wrap: nowrap; gap: .5rem; width: 100%; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
	.cp-day ol::-webkit-scrollbar { display: none; }
	.cp-day li + li::before { margin-right: .5rem; }
	.cp-day a { font-size: .8rem; }
	.cp-facts-list div { grid-template-columns: 1fr; gap: .15rem; }
	.cp-lounge { min-height: 0; }
	.cp-acts .btn { flex: 1 1 0; min-width: 0; padding: .95rem .6rem; text-align: center; white-space: nowrap; font-size: clamp(8px, 2.6vw, var(--eyebrow-size)); }
}
@media (prefers-reduced-motion: reduce) {
	.cp-ph img { transition: none; }
}