/* ============================================================
   Por & Prem — LOGIN GATE  (v0.18.0)
   Pixel-match mockup — Stream B refinement
   Order: logo → wordmark → couple image (bottom-faded) →
          green LINE pill (with mirror reflection) →
          4-col countdown (with dot separators) →
          italic quote → subtle gold dash line
   v0.18.0: warmer ivory base (#FFFFF8), couple bottom mask-fade,
            above-the-fold tightening, dot separators, button reflection,
            decorative bottom line.
   ============================================================ */

/* When the gate renders we own the page background — no header/footer */
body.pp-gate-active {
	background: #FFFFF8;
	color: #1F2937;
	overflow-x: hidden;
}
body.pp-gate-active .site-header,
body.pp-gate-active .site-footer {
	display: none !important;
}

/* ============================================================
   1. Stage
   ============================================================ */
.pp-gate {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: clamp(4px, 1vh, 14px) clamp(16px, 4vw, 32px) clamp(20px, 4vh, 36px);
	background: #FFFFF8;
	color: #1F2937;
	overflow-x: hidden;
	overflow-y: hidden;
	isolation: isolate;
}

/* v0.21.0 — Particle layer (user mandate "ทำให้หน้า login มีกุหลาบกับสีทองๆปลิวเหมือนหน้าเปิดการ์ด") */
.pp-gate__silk {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(ellipse 70% 100% at 50% 0%, rgba(252,178,169,0.10) 0%, rgba(252,178,169,0) 70%),
		linear-gradient(125deg, #FFFFF8 0%, #FBF5EF 22%, #F4ECE0 45%, #FFFFF8 70%, #F4ECE0 100%);
	pointer-events: none;
}

.pp-gate__swirls {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.pp-gate__particles {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.pp-gate__corner-star {
	position: absolute;
	bottom: 16px;
	right: 16px;
	width: 28px;
	height: 28px;
	z-index: 3;
	pointer-events: none;
	animation: pp-env-star-pulse 3.4s ease-in-out infinite;
	filter: drop-shadow(0 0 8px rgba(252,178,169,0.5));
}

/* Ensure inner stack sits above decorative layer */
.pp-gate__inner {
	position: relative;
	z-index: 5;
}

/* Soft gold haze in upper corners — adds warmth without distracting */
.pp-gate::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 40vh;
	background:
		radial-gradient(ellipse 70% 100% at 50% 0%, rgba(252,178,169,0.10) 0%, rgba(252,178,169,0) 70%);
	pointer-events: none;
	z-index: 0;
}

/* ============================================================
   2. Top bar — language switch (small, top-right, doesn't push layout)
   ============================================================ */
.pp-gate__topbar {
	position: absolute;
	top: clamp(10px, 2vw, 18px);
	right: clamp(12px, 3vw, 20px);
	z-index: 5;
}
.pp-gate__chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	background: rgba(255,255,255,0.85);
	border: 1px solid rgba(252,178,169,0.30);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #5D6770;
	box-shadow: 0 2px 6px rgba(31,41,55,0.04);
}
.pp-gate__chip button {
	background: none;
	border: 0;
	padding: 4px 8px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	border-radius: 999px;
	min-height: 28px;
	line-height: 1;
}
.pp-gate__chip button[aria-pressed="true"] {
	background: #FCB2A9;
	color: #FFFFFF;
}

/* ============================================================
   3. Vertical stack
   ============================================================ */
.pp-gate__inner {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 2vh, 20px);
}

/* ============================================================
   4. Header — P&P infinity logo + POR & PREM wordmark
   ============================================================ */
.pp-gate__header {
	text-align: center;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.pp-gate__logo {
	display: block;
	width: clamp(96px, 22vw, 132px);
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 4px 12px rgba(252,178,169,0.28))
	        drop-shadow(0 1px 3px rgba(252,178,169,0.18));
}
.pp-gate__logo--fallback {
	font-family: var(--font-script);
	font-size: 88px;
	line-height: 1;
	color: #FCB2A9;
}
.pp-gate__wordmark {
	margin: clamp(8px, 1.2vh, 12px) 0 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(0.9rem, 2.4vw, 1.1rem);
	font-weight: 500;
	letter-spacing: 0.3em;
	color: #5D6770;
	text-transform: uppercase;
	line-height: 1;
	/* "POR & PREM" with 0.3em letter-spacing can split awkwardly with the
	   ampersand dropping to a 2nd line. Force one line — it's short enough. */
	white-space: nowrap;
}

/* ============================================================
   5. Couple illustration — the visual hero
   v0.18.0: bottom mask-fade into bg + above-the-fold height fix
   ============================================================ */
.pp-gate__couple {
	margin: 0 auto clamp(4px, 1vh, 12px);
	width: 100%;
	max-width: 420px;
	/* v0.20.6: min-height REMOVED — was 40vh = 372px container with
	   image flex-end-anchored → big whitespace gap above couple's head.
	   Let image dictate container height. */
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	overflow: hidden;
}
/* v0.20.7: pull HARDER STILL. User says still too much gap at 430x932.
   Now -56px on tall viewports (was -28px), scales smoothly down to -18px
   on tiny screens so we don't crash into the wordmark on iPhone SE. */
.pp-gate__header + .pp-gate__couple {
	margin-top: clamp(-56px, -6vh, -18px);
}
.pp-gate__couple-img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 56vh;            /* v0.20.6: bump from 52vh — fuller presence */
	object-fit: contain;
	object-position: center bottom;
	display: block;
	margin: 0 auto;
	/* Soft fade: bottom 28% of image blends seamlessly into cream bg */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
}
/* Subtle ground reflection — soft gold gradient fade under feet */
.pp-gate__couple::after {
	content: '';
	position: absolute;
	left: 15%;
	right: 15%;
	bottom: -2px;
	height: 18px;
	background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(252,178,169,0.12) 0%, rgba(252,178,169,0) 75%);
	pointer-events: none;
	z-index: -1;
}

/* ============================================================
   6. LINE login pill — primary action
   v0.18.0: subtle white mirror-reflection beneath the pill
   ============================================================ */
.pp-gate__line-btn {
	position: relative;
	width: 100%;
	max-width: 420px;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 24px;
	background: #06C755;
	color: #FFFFFF;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body-th);
	font-size: clamp(1rem, 2.5vw, 1.1rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow:
		0 10px 24px rgba(6,199,85,0.28),
		0 2px 6px rgba(6,199,85,0.15);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 200ms ease,
	            background 200ms ease;
	-webkit-tap-highlight-color: transparent;
}
/* Soft mirror reflection beneath the pill — like glass tabletop */
.pp-gate__line-btn::after {
	content: '';
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -8px;
	height: 6px;
	background: linear-gradient(180deg,
		rgba(255,255,255,0.5) 0%,
		rgba(255,255,255,0) 100%);
	border-radius: 50%;
	filter: blur(3px);
	opacity: 0.6;
	pointer-events: none;
}
.pp-gate__line-btn:hover,
.pp-gate__line-btn:focus-visible {
	background: #05B14C;
	transform: translateY(-2px);
	box-shadow:
		0 14px 30px rgba(6,199,85,0.35),
		0 3px 8px rgba(6,199,85,0.18);
	outline: none;
}
.pp-gate__line-btn:focus-visible {
	box-shadow:
		0 14px 30px rgba(6,199,85,0.35),
		0 0 0 3px rgba(6,199,85,0.30);
}
.pp-gate__line-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(6,199,85,0.22);
}
.pp-gate__line-btn[aria-busy="true"],
.pp-gate__line-btn[disabled] {
	opacity: 0.7;
	cursor: wait;
	transform: none;
}
.pp-gate__line-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pp-gate__line-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.pp-gate__line-text {
	flex: 0 1 auto;
	text-align: center;
	line-height: 1.2;
	/* "เข้าสู่ระบบ / สมัครสมาชิก" was wrapping in 2 lines with the slash
	   ending up alone. nowrap forces the full label on 1 line — the button
	   has padding flexibility to accommodate it. */
	white-space: nowrap;
}

/* ============================================================
   7. Countdown block
   v0.18.0: subtle vertical dividers between cells (Approach A)
   ============================================================ */
.pp-gate__countdown {
	width: 100%;
	max-width: 420px;
	margin-top: clamp(8px, 1.5vh, 16px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 1.5vh, 14px);
}
.pp-gate__cd-eyebrow {
	margin: 0;
	font-family: var(--font-body-th);
	font-size: 0.82rem;
	font-weight: 500;
	color: #6B7280;
	letter-spacing: 0.06em;
}
.pp-gate__cd-title {
	margin: 0;
	font-family: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
	font-style: italic;
	font-size: clamp(1.05rem, 3vw, 1.3rem);
	font-weight: 500;
	color: #1F2937;
	line-height: 1.3;
	/* Balance long Thai title "จนถึงวันที่เริ่มต้นด้วยกัน" so it
	   doesn't leave 1 character orphaned at narrow widths. */
	text-wrap: balance;
	max-width: 340px;
	margin-inline: auto;
}
.pp-gate__cd-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(8px, 2.5vw, 18px);
	width: 100%;
	max-width: 420px;
	margin: clamp(4px, 1vh, 8px) auto 0;
}
.pp-gate__cd-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
}
/* Thin vertical gradient divider between countdown cells */
.pp-gate__cd-cell + .pp-gate__cd-cell::before {
	content: '';
	position: absolute;
	left: calc(-1 * clamp(8px, 2.5vw, 18px) / 2);
	top: 22%;
	bottom: 38%;
	width: 1px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(93,103,112,0.30) 50%,
		transparent 100%);
	pointer-events: none;
}
.pp-gate__cd-num {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(2.5rem, 9vw, 3.75rem);
	font-weight: 600;
	color: #1F2937;
	line-height: 1;
	font-variant-numeric: tabular-nums lining-nums;
	/* v0.33.BLOOM Phase 5 — ceremonial gold underglow on countdown digits.
	   1 of 3 gold accent points per plan (was specified in silver plan but
	   never implemented — BLOOM adds). Reading: "เวลามงคล / นาฬิกาฤกษ์"
	   — ritual warmth on the surface that signals "the date approaches". */
	filter: drop-shadow(0 0 12px rgba(196, 160, 71, 0.25));
	font-feature-settings: 'tnum' on, 'lnum' on;
	letter-spacing: 0;
	/* Numbers never wrap — 3-digit day counts (e.g. 178) must stay on one line. */
	white-space: nowrap;
}
.pp-gate__cd-lbl {
	font-family: var(--font-body-th);
	font-size: 0.75rem;
	font-weight: 400;
	color: #6B7280;
	letter-spacing: 0.02em;
	line-height: 1;
	/* Short labels "วัน/ชั่วโมง/นาที/วินาที" — never wrap. */
	white-space: nowrap;
}
.pp-gate__quote {
	margin: clamp(6px, 1.5vh, 12px) 0 0;
	font-family: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
	font-style: italic;
	font-size: clamp(0.85rem, 2.2vw, 1rem);
	color: #6B7280;
	line-height: 1.6;
	max-width: 380px;
	text-align: center;
	/* Pretty wrap avoids orphan words on the quote's last line. */
	text-wrap: pretty;
	margin-inline: auto;
}
.pp-gate__quote em {
	font-style: italic;
}
/* Subtle gold dash line closes the composition — frame closure */
.pp-gate__quote::after {
	content: '';
	display: block;
	margin: clamp(12px, 2vh, 20px) auto 0;
	width: 80px;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(93,103,112,0.40) 50%,
		transparent 100%);
}

/* ============================================================
   8. Tiny-screen (iPhone SE / 360px) — tighten everything
   v0.18.0: aggressive height cap for short viewports
   ============================================================ */
@media (max-width: 380px) {
	.pp-gate {
		padding: 4px 14px 22px;
	}
	.pp-gate__inner {
		gap: 10px;
	}
	.pp-gate__logo {
		width: 84px;
	}
	.pp-gate__wordmark {
		font-size: 0.82rem;
		letter-spacing: 0.28em;
	}
	.pp-gate__couple-img {
		max-height: 50vh;   /* v0.20.6: slight bump for fuller presence */
	}
	.pp-gate__couple {
		/* v0.20.6: min-height removed — matches default rule, prevents whitespace */
	}
	.pp-gate__line-btn {
		font-size: 0.95rem;
		min-height: 52px;
		padding: 12px 18px;
	}
	.pp-gate__cd-grid {
		gap: 8px;
	}
	.pp-gate__cd-num {
		font-size: 2.2rem;
	}
	.pp-gate__cd-lbl {
		font-size: 0.68rem;
	}
}

/* ============================================================
   9. Desktop ≥768px — re-balance to keep block top-anchored
   v0.18.0: moderate height cap so countdown stays above fold
   ============================================================ */
@media (min-width: 768px) {
	.pp-gate {
		padding-top: clamp(8px, 1.5vh, 20px);
	}
	.pp-gate__couple {
		max-width: 480px;
		/* v0.20.6: min-height removed — let image dictate, prevents floating whitespace */
	}
	.pp-gate__couple-img {
		max-height: 62vh;   /* v0.20.6: slight bump for desktop */
	}
}

/* ============================================================
   9b. Desktop ≥1024px — 2-column asymmetric layout
        v0.32.10 — Owner constraint: "ฉันไม่ได้อยากให้ย่อทั้งคู่"
        + "อยากให้จัด layout ใหม่ให้ mobile แบบเดิมและจัด pc ให้
        เหมาะสม". Mobile keeps the vertical stack (no rules changed
        below 1024px). On desktop we use CSS Grid template-areas to
        re-arrange the SAME DOM into:
           ┌────────────┬────────────┐
           │            │  header    │
           │            │  (error)   │
           │   couple   │  LINE btn  │
           │  (full ht) │  countdown │
           │            │            │
           └────────────┴────────────┘
        `.pp-gate__inner` becomes display:contents so children
        participate in the parent grid directly — no DOM/PHP edit
        needed. Couple gets full viewport height + bigger max-height
        cap (62vh → 86vh / 760px) so it stays large per owner ask.
        Action column hugs the left edge of its column (start-aligned)
        so the design reads as a paired composition, not floating.
   ============================================================ */
@media (min-width: 1024px) {
	.pp-gate {
		display: grid;
		grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
		grid-template-areas:
			"couple header"
			"couple error"
			"couple btn"
			"couple countdown";
		grid-template-rows: auto auto auto 1fr;
		column-gap: clamp(48px, 6vw, 96px);
		row-gap: clamp(16px, 2.4vh, 28px);
		align-content: center;
		justify-content: center;
		padding: 32px clamp(40px, 5vw, 80px);
		max-width: 1440px;
		margin-inline: auto;
	}
	/* Wrapper bows out so its children become direct grid items. */
	.pp-gate__inner {
		display: contents;
	}
	.pp-gate__couple {
		grid-area: couple;
		align-self: center;
		justify-self: end;
		max-width: min(640px, 100%);
		margin: 0;
	}
	/* Override the negative margin v0.20.7 added for mobile stacking. */
	.pp-gate__header + .pp-gate__couple {
		margin-top: 0;
	}
	.pp-gate__couple-img {
		max-height: min(86vh, 760px);
	}
	.pp-gate__header {
		grid-area: header;
		/* v0.32.11 — owner: "ปรับ login ให้อยู่กลางหน่อย นับถอยหลังด้วย".
		   Center the action column items in their grid cell so the
		   right side of the composition reads as a stacked ceremonial
		   sequence (logo → CTA → countdown), not a left-aligned form. */
		justify-self: center;
		text-align: center;
		align-items: center;
	}
	.pp-gate__login-error {
		grid-area: error;
		justify-self: center;
		max-width: 460px;
		margin: 0 !important;
	}
	.pp-gate__line-btn {
		grid-area: btn;
		justify-self: center;
		width: 100%;
		max-width: 420px;
		margin: 0;
	}
	.pp-gate__countdown {
		grid-area: countdown;
		justify-self: center;
		text-align: center;
		align-items: center;
		max-width: 460px;
		margin: 0;
	}
	.pp-gate__cd-eyebrow,
	.pp-gate__cd-title {
		text-align: center;
	}
	.pp-gate__cd-grid {
		max-width: 460px;
		margin-inline: auto;
		gap: clamp(12px, 1.6vw, 20px);
	}
	.pp-gate__cd-num {
		font-size: clamp(3rem, 4.2vw, 4rem);
	}
}

/* Wide desktop ≥1440px — release a bit more breathing space + scale */
@media (min-width: 1440px) {
	.pp-gate {
		padding-inline: clamp(80px, 8vw, 160px);
		column-gap: clamp(80px, 8vw, 140px);
	}
	.pp-gate__couple-img {
		max-height: min(82vh, 820px);
	}
	.pp-gate__cd-num {
		font-size: clamp(3.4rem, 3.8vw, 4.4rem);
	}
}

/* Ultra-wide ≥1920px — switch to a 50/50 grid so action col doesn't
   look small against the huge canvas; bump countdown max-width. */
@media (min-width: 1920px) {
	.pp-gate {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		max-width: 1800px;
	}
	.pp-gate__countdown,
	.pp-gate__cd-grid,
	.pp-gate__login-error,
	.pp-gate__line-btn {
		max-width: 520px;
	}
}

/* Short-height tablet landscape (e.g. 1024×600) — compress couple
   slightly + tighten action col gaps so everything still fits without
   crowding. */
@media (min-width: 1024px) and (max-height: 720px) {
	.pp-gate {
		padding-block: 16px;
		row-gap: clamp(10px, 1.8vh, 18px);
	}
	.pp-gate__couple-img {
		max-height: 84vh;
	}
	.pp-gate__cd-num {
		font-size: clamp(2.6rem, 3.5vw, 3.4rem);
	}
}

/* Print — strip decorations, keep countdown legible. */
@media print {
	.pp-gate {
		display: block;
		padding: 24px;
	}
	.pp-gate__couple,
	.pp-gate__line-btn,
	.pp-gate__particles,
	.pp-gate__swirls,
	.pp-gate__silk,
	.pp-gate__corner-star {
		display: none;
	}
	.pp-gate__countdown {
		color: #000;
	}
}

/* ============================================================
   10. Entry choreography — staggered rise
   ============================================================ */
.pp-gate__header,
.pp-gate__couple,
.pp-gate__line-btn,
.pp-gate__countdown {
	opacity: 0;
	transform: translateY(12px);
	animation: pp-gate-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
	will-change: transform, opacity;
}
.pp-gate__header    { animation-delay: 80ms; }
.pp-gate__couple    { animation-delay: 240ms; }
.pp-gate__line-btn  { animation-delay: 480ms; }
.pp-gate__countdown { animation-delay: 640ms; }

@keyframes pp-gate-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Subtle infinite halo behind the logo */
.pp-gate__logo {
	animation: pp-gate-logo-breathe 6s ease-in-out infinite;
}
/* PRESERVED WARM (v0.33.SILVER Phase 4) — pp-gate-logo-breathe is the
   SINGLE warm motion in the silver palette. Drop-shadow pulses warm
   gold (--color-gold-logo #C4A047) around the P&P logo as the visual
   "heartbeat" anchoring brand identity in a cool palette. Per plan
   ux-ui-expert cultural mitigation — silver-only risks reading as
   "ดูเหมือนงานศพ" to elderly Thai cohort. Logo halo = warm ritual point. */
@keyframes pp-gate-logo-breathe {
	0%, 100% { filter: drop-shadow(0 4px 12px rgba(196,160,71,0.28)) drop-shadow(0 1px 3px rgba(196,160,71,0.18)); }
	50%      { filter: drop-shadow(0 6px 18px rgba(196,160,71,0.42)) drop-shadow(0 2px 5px rgba(196,160,71,0.25)); }
}

/* ============================================================
   11. Reduced motion safety
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.pp-gate__header,
	.pp-gate__couple,
	.pp-gate__line-btn,
	.pp-gate__countdown {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.pp-gate__logo {
		animation: none;
	}
}