/* ==========================================================================
   Thai Sabai — reusable page components
   --------------------------------------------------------------------------
   Loaded on every page via layouts/site.blade.php. Build new pages with these
   classes so they match the homepage / services / booking / gift-card design.

   IMPORTANT: the component classes below are scoped under a `.page` root so
   they never clash with existing pages. Wrap a new page's content in
   <div class="page"> … </div> to opt in. Colour tokens (--cream, --brown,
   --ink, --line, --on-photo, --muted, --cream-2 …) and the button classes
   (.btn, .btn-dark, .btn-outline, .btn-liquid) live in the layout's inline
   <style>. Larken is the brand serif; Inter is the body font.

   QUICK START for a new page (e.g. contact):
     @extends('layouts.site')
     @section('content')
       <div class="page">
         <section class="page-hero">
           <div class="hero-bg" style="background-image:url('…')"></div>
           <div class="page-crumb-bar"><div class="container"><nav class="page-crumbs">
             <a href="…">Home</a><span class="sep">/</span><span>Contact</span>
           </nav></div></div>
           <div class="container page-hero-inner">
             <h1>Say hello.</h1>
             <p class="lede">…</p>
           </div>
         </section>

         <section class="page-section">
           <div class="container">
             <div class="section-head">
               <span class="label">Get in touch</span>   {{-- .label is defined in the layout --}}
               <h2>…</h2>
               <p class="sub">…</p>
             </div>
             <div class="card">
               <input class="field" placeholder="Email">
               <textarea class="field" placeholder="Message"></textarea>
               <button class="pill selected">Send</button>
             </div>
           </div>
         </section>
       </div>
     @endsection

   Available inside `.page`:
     .page-hero / .hero-bg / .page-hero-inner / h1 / .lede   → photo hero band
     .page-crumb-bar + .page-crumbs                          → breadcrumb pinned under the header
     .page-section                                           → vertical section rhythm
     .section-head (+ .label / h2 / .sub)                    → eyebrow + heading + subhead
     .card (.card--paper)                                    → cream panel w/ soft shadow
     .step-num                                               → numbered circle badge
     .pill (.pill.selected)                                  → selectable option button
     .field (input/select/textarea.field)                   → pill-shaped form field
     .sticky-aside                                           → sticky sidebar on desktop
     .carving-bg                                             → Thai-carving watermark backdrop
   ========================================================================== */

/* ===== Hero band (photo + dark overlay, breadcrumb pinned top, title bottom) */
.page .page-hero { position: relative; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden; }
@media (min-width: 900px) { .page .page-hero { min-height: 56vh; } }
.page .page-hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page .page-hero .hero-bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(58,40,28,.5) 0%, rgba(58,40,28,.3) 45%, rgba(58,40,28,.62) 100%); }
.page .page-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 52px; color: var(--on-photo); }
.page .page-hero h1 { font-family: 'Larken','Fraunces',Georgia,serif; font-weight: 200;
    font-size: clamp(38px, 5vw, 66px); line-height: 1.05; letter-spacing: .005em; margin: 0 0 14px; max-width: 18ch; }
.page .page-hero .lede { font-size: 16px; line-height: 1.6; max-width: 60ch; color: rgba(251,239,220,.92); margin: 0; }

/* Breadcrumb — pinned just under the fixed header inside a .page-hero */
.page .page-crumb-bar { position: absolute; top: 120px; left: 0; right: 0; z-index: 3; }
.page .page-crumbs { display: flex; align-items: center; font-size: 13px; color: rgba(251,239,220,.82); }
.page .page-crumbs a:hover { color: var(--on-photo); }
.page .page-crumbs .sep { margin: 0 8px; opacity: .55; }

/* ===== Section rhythm + heading ===== */
.page .page-section { padding: 96px 0; }
@media (max-width: 768px) { .page .page-section { padding: 60px 0; } }
.page .section-head { margin-bottom: 40px; }
.page .section-head .label { display: inline-flex; margin-bottom: 14px; }
.page .section-head h2 { font-family: 'Larken','Fraunces',Georgia,serif; font-weight: 300;
    font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: .005em; margin: 0; max-width: 20ch; }
.page .section-head .sub { color: var(--muted); margin-top: 14px; max-width: 56ch; font-size: 15.5px; }

/* ===== Card (cream panel with soft shadow) ===== */
.page .card { background: var(--cream); border: 1px solid var(--line); border-radius: 26px;
    padding: 38px 40px; box-shadow: 0 30px 70px -46px rgba(58,40,28,.4); }
@media (max-width: 600px) { .page .card { padding: 26px 22px; border-radius: 20px; } }
.page .card--paper { background: var(--paper); }

/* Numbered step badge (for multi-step forms) */
.page .step-num { width: 43px; height: 43px; flex-shrink: 0; border-radius: 50%;
    background: rgba(145,108,83,0.10); color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Larken','Fraunces',serif; font-size: 18px; }

/* ===== Selectable pill / option button ===== */
.page .pill { display: inline-flex; align-items: center; gap: 10px; justify-content: center; cursor: pointer;
    font-family: inherit; font-size: 15px; color: var(--ink); background: rgba(145,108,83,0.10);
    border: 1px solid transparent; border-radius: 999px; padding: 15px 18px; transition: all .16s ease; }
.page .pill svg { width: 17px; height: 17px; color: var(--brown); flex-shrink: 0; }
.page .pill:hover { border-color: var(--brown); }
.page .pill.selected { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.page .pill.selected svg { color: var(--cream); }

/* ===== Form field (pill-shaped input / select / textarea) ===== */
.page .field { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: rgba(145,108,83,0.10);
    border: 1px solid transparent; border-radius: 999px; padding: 16px 22px; transition: border-color .16s ease; }
.page .field::placeholder { color: var(--muted); }
.page .field:focus { outline: none; border-color: var(--brown); }
.page textarea.field { border-radius: 22px; resize: vertical; min-height: 130px; }

/* ===== Sticky sidebar (order summary / info panel on desktop) ===== */
.page .sticky-aside { position: static; }
@media (min-width: 980px) { .page .sticky-aside { position: sticky; top: 108px; } }
/* NOTE: never put overflow:hidden on an ancestor of a sticky element — it disables sticky. */

/* ===== Thai-carving watermark backdrop (as on the homepage "17 years" band) ===== */
.page .carving-bg { position: relative; }
.page .carving-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('/images/home/why-bg.webp') no-repeat center center / cover; opacity: .5; }
.page .carving-bg > * { position: relative; z-index: 1; }