/* ============================================================================
   YOHAK COMPONENT + LAYOUT STYLES
   Framework-free rebuild of the yohak.ph visual language.
   Pairs with tokens.css. See website/DESIGN_SYSTEM.md.
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none}

::selection{background:var(--yk-bg);color:var(--yk-primary)}
::-moz-selection{background:var(--yk-bg);color:var(--yk-primary)}

/* ---- Base typography --------------------------------------------------- */
body{
  font-family:"Sofia Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--yk-text);
  font-size:var(--yk-text-m);
  font-weight:400;
  line-height:1.45;
  background:var(--yk-white);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  color:var(--yk-heading);
  font-family:"Albertus Nova",Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.01em;
}
h1{font-size:var(--yk-h1)}
h2{font-size:var(--yk-h2)}
/* h3/h4 intentionally use the sans (Sofia Pro) per brand framework */
h3{font-family:"Sofia Pro",sans-serif;font-weight:400;font-size:var(--yk-space-l)}
h4{font-family:"Sofia Pro",sans-serif;font-weight:500;font-size:var(--yk-text-l)}
p{max-width:68ch}
@media (max-width:991px){h1{font-size:4rem}h2{font-size:3rem}}
@media (max-width:767px){h1{font-size:3.5rem}}
@media (max-width:478px){h1{font-size:3.5rem}h2{font-size:2.5rem}}

.yk-eyebrow{
  font-family:"Sofia Pro",sans-serif;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:var(--yk-text-xs);
  font-weight:500;
  color:var(--yk-accent);
}
.yk-lead{font-size:var(--yk-text-l);font-weight:300;color:var(--yk-secondary)}
.yk-muted{color:var(--yk-accent-muted)}

/* ---- Layout helpers ---------------------------------------------------- */
.yk-container{width:min(100% - 2 * var(--yk-space-l), var(--yk-container));margin-inline:auto}
.yk-section{padding-block:var(--yk-section-y)}
.yk-section--tight{padding-block:var(--yk-space-xl)}
.yk-section--light{background:var(--yk-bg)}
.yk-section--dark{background:var(--yk-primary);color:var(--yk-bg)}
.yk-section--dark h1,.yk-section--dark h2,.yk-section--dark h3,.yk-section--dark h4{color:var(--yk-bg)}
.yk-center{text-align:center}
.yk-stack > * + *{margin-top:var(--yk-space-s)}
.yk-section-head{max-width:60ch;margin-inline:auto;margin-bottom:var(--yk-space-xl)}
.yk-section-head.yk-center{text-align:center}

/* ---- Buttons (exact brand spec: uppercase, square, smooth) ------------- */
.yk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.4rem 2.6rem;
  font-family:"Sofia Pro",sans-serif;
  font-size:var(--yk-text-s);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.12em;
  border-radius:var(--yk-radius);
  background:var(--yk-primary);
  color:var(--yk-bg);
  border:1px solid var(--yk-primary);
  transition:background var(--yk-transition-smooth),color var(--yk-transition-smooth),
             transform var(--yk-transition-fast),box-shadow var(--yk-transition-smooth);
  cursor:pointer;
}
.yk-btn:hover{background:var(--yk-accent);border-color:var(--yk-accent);color:var(--yk-bg);
  transform:translateY(-2px);box-shadow:0 10px 24px var(--yk-shadow-subtle)}
.yk-btn--outline{background:transparent;color:var(--yk-primary);border:1px solid var(--yk-primary)}
.yk-btn--outline:hover{background:var(--yk-primary);color:var(--yk-bg)}
.yk-btn--light{background:var(--yk-bg);color:var(--yk-primary);border:1px solid var(--yk-bg)}
.yk-btn--light:hover{background:var(--yk-accent);border-color:var(--yk-accent);color:var(--yk-bg)}
.yk-btn--ghost{background:transparent;color:var(--yk-bg);border:1px solid rgba(217,208,193,.6)}
.yk-btn--ghost:hover{background:var(--yk-bg);color:var(--yk-primary)}
.yk-btn--block{display:flex;width:100%}
.yk-link-arrow{font-family:"Sofia Pro",sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:var(--yk-text-xs);color:var(--yk-accent);display:inline-flex;gap:.5em;align-items:center}
.yk-link-arrow::after{content:"\2192";transition:transform var(--yk-transition-fast)}
.yk-link-arrow:hover::after{transform:translateX(4px)}

/* ---- Header / nav ------------------------------------------------------ */
.yk-header{position:fixed;inset:0 0 auto 0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.8rem clamp(1.6rem,4vw,4rem);
  transition:background var(--yk-transition-smooth),padding var(--yk-transition-smooth);
}
.yk-header__logo img{height:34px;width:auto;filter:brightness(0) invert(1)}
.yk-header.is-scrolled{background:rgba(58,75,58,.96);backdrop-filter:blur(8px);padding-block:1.2rem}
.yk-header.is-scrolled .yk-header__logo img{filter:brightness(0) invert(1)}
.yk-nav{display:flex;align-items:center;gap:clamp(1.6rem,2.4vw,3.2rem)}
.yk-nav a{font-family:"Sofia Pro",sans-serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:var(--yk-text-xs);color:var(--yk-bg);position:relative;padding-block:.4rem}
.yk-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--yk-accent);transition:width var(--yk-transition-smooth)}
.yk-nav a:hover::after{width:100%}
.yk-nav__cta{margin-left:.6rem}
.yk-nav-toggle{display:none}
@media (max-width:900px){
  .yk-nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:2.4rem;
    background:var(--yk-primary);transform:translateX(100%);transition:transform .4s ease;}
  .yk-nav.is-open{transform:translateX(0)}
  .yk-nav a{font-size:var(--yk-text-m)}
  .yk-nav-toggle{display:flex;flex-direction:column;gap:5px;z-index:1100;width:30px}
  .yk-nav-toggle span{height:2px;background:var(--yk-bg);transition:.3s}
  .yk-nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .yk-nav-toggle.is-open span:nth-child(2){opacity:0}
  .yk-nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- Hero -------------------------------------------------------------- */
.yk-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;
  color:var(--yk-bg);overflow:hidden}
.yk-hero__bg{position:absolute;inset:0;z-index:-2}
.yk-hero__bg img{width:100%;height:100%;object-fit:cover}
.yk-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(47,60,47,.35) 0%,rgba(47,60,47,.15) 40%,rgba(47,60,47,.78) 100%)}
.yk-hero__inner{padding-bottom:clamp(4rem,12vh,12rem);padding-top:clamp(8.5rem,18vw,12rem)}
.yk-hero h1{color:var(--yk-bg);font-size:clamp(4.2rem,9vw,9rem);max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.yk-hero .yk-eyebrow{color:var(--yk-bg);opacity:.9}
.yk-hero__sub{font-size:var(--yk-text-l);font-weight:300;max-width:48ch;margin-block:var(--yk-space-s) var(--yk-space-m);color:var(--yk-bg)}
.yk-hero__actions{display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---- Pillars (Hinahon / Kusa / Muni-muni / Ginhawa) -------------------- */
.yk-grid{display:grid;gap:var(--yk-space-l)}
.yk-grid--2{grid-template-columns:repeat(2,1fr)}
.yk-grid--3{grid-template-columns:repeat(3,1fr)}
.yk-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.yk-grid--3,.yk-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.yk-grid--2,.yk-grid--3,.yk-grid--4{grid-template-columns:1fr}}
.yk-pillar{border-top:1px solid var(--yk-line);padding-top:var(--yk-space-s)}
.yk-pillar h3{font-family:"Albertus Nova",serif;color:var(--yk-primary);font-size:var(--yk-text-xl);margin-bottom:.6rem}
.yk-pillar p{font-size:var(--yk-text-s);color:var(--yk-secondary)}

/* ---- Tour / product cards --------------------------------------------- */
.yk-card{background:var(--yk-white);border:1px solid var(--yk-line);border-radius:var(--yk-radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform var(--yk-transition-smooth),box-shadow var(--yk-transition-smooth)}
.yk-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px var(--yk-shadow-subtle)}
.yk-card__media{aspect-ratio:4/3;overflow:hidden}
.yk-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.yk-card:hover .yk-card__media img{transform:scale(1.05)}
.yk-card__body{padding:var(--yk-space-m);display:flex;flex-direction:column;gap:.8rem;flex:1}
.yk-card__body h3{font-family:"Albertus Nova",serif;color:var(--yk-primary);font-size:var(--yk-text-xl)}
.yk-card__body p{font-size:var(--yk-text-s)}
.yk-card__price{font-family:"Sofia Pro",sans-serif;color:var(--yk-accent);font-size:var(--yk-text-s);
  text-transform:uppercase;letter-spacing:.08em;margin-top:auto}
.yk-card__price b{font-weight:500;font-size:var(--yk-text-l)}
.yk-card__foot{padding:0 var(--yk-space-m) var(--yk-space-m)}

/* ---- Split / feature ---------------------------------------------------- */
.yk-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--yk-space-2xl);align-items:center}
.yk-split--reverse .yk-split__media{order:2}
@media (max-width:850px){.yk-split{grid-template-columns:1fr}.yk-split--reverse .yk-split__media{order:0}}
.yk-split__media img{border-radius:var(--yk-radius-img);width:100%;object-fit:cover}
.yk-founder-sign{font-family:"Albertus Nova",serif;font-size:var(--yk-text-xl);color:var(--yk-primary);margin-top:var(--yk-space-s)}

/* ---- Steps (numbered process) ----------------------------------------- */
.yk-step{counter-increment:step}
.yk-step__num{font-family:"Albertus Nova",serif;font-size:var(--yk-text-2xl);color:var(--yk-accent-muted);line-height:1}
.yk-step h4{margin-block:.6rem .4rem;color:var(--yk-bg);font-family:"Albertus Nova",serif}
.yk-section--dark .yk-step p{color:rgba(217,208,193,.85);font-size:var(--yk-text-s)}

/* ---- Calendar / seasons ----------------------------------------------- */
.yk-season{border:1px solid var(--yk-line);border-radius:var(--yk-radius);padding:var(--yk-space-m);background:var(--yk-white)}
.yk-season h3{font-family:"Albertus Nova",serif;color:var(--yk-primary);font-size:var(--yk-text-xl);margin-bottom:.6rem}
.yk-season p{font-size:var(--yk-text-s)}
.yk-season__tag{display:inline-block;font-size:var(--yk-text-2xs);text-transform:uppercase;letter-spacing:.14em;
  color:var(--yk-accent);border:1px solid var(--yk-line);padding:.3rem .8rem;border-radius:99px;margin-bottom:1rem}

/* ---- Reviews badge ----------------------------------------------------- */
.yk-reviews{display:inline-flex;align-items:center;gap:1rem;border:1px solid var(--yk-line);
  border-radius:99px;padding:1rem 1.8rem}
.yk-reviews__stars{color:var(--yk-accent);letter-spacing:.2em;font-size:var(--yk-text-m)}
.yk-reviews__score{font-family:"Albertus Nova",serif;font-size:var(--yk-text-l);color:var(--yk-primary)}
.yk-reviews small{color:var(--yk-accent-muted);font-size:var(--yk-text-xs)}

/* ---- CTA band ---------------------------------------------------------- */
.yk-cta{position:relative;overflow:hidden;color:var(--yk-bg);text-align:center}
.yk-cta__bg{position:absolute;inset:0;z-index:-2}
.yk-cta__bg img{width:100%;height:100%;object-fit:cover}
.yk-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(47,60,47,.72)}
.yk-cta h2{color:var(--yk-bg)}
.yk-cta ul{display:inline-flex;flex-direction:column;gap:.8rem;text-align:left;margin-block:var(--yk-space-m);
  font-size:var(--yk-text-s)}
.yk-cta li{position:relative;padding-left:2.2rem}
.yk-cta li::before{content:"\2014";position:absolute;left:0;color:var(--yk-accent)}

/* ---- Footer ------------------------------------------------------------ */
.yk-footer{background:var(--yk-bg-deep);color:var(--yk-bg);padding-block:var(--yk-space-xl) var(--yk-space-l)}
.yk-footer a:hover{color:var(--yk-accent)}
.yk-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--yk-space-l)}
@media (max-width:760px){.yk-footer__grid{grid-template-columns:1fr}}
.yk-footer h4{color:var(--yk-bg);font-family:"Sofia Pro",sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:var(--yk-text-xs);margin-bottom:1.2rem;opacity:.7}
.yk-footer li{margin-bottom:.8rem;font-size:var(--yk-text-s)}
.yk-footer__bottom{border-top:1px solid rgba(217,208,193,.2);margin-top:var(--yk-space-l);
  padding-top:var(--yk-space-m);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:var(--yk-text-xs);color:var(--yk-accent-muted)}

/* ---- Comparison table -------------------------------------------------- */
.yk-table-wrap{overflow-x:auto;border:1px solid var(--yk-line);border-radius:var(--yk-radius)}
.yk-table{width:100%;border-collapse:collapse;background:var(--yk-white);font-size:var(--yk-text-s)}
.yk-table th,.yk-table td{padding:1.4rem 1.6rem;text-align:left;border-bottom:1px solid var(--yk-line)}
.yk-table thead th{font-family:"Albertus Nova",serif;color:var(--yk-primary);font-weight:400;
  background:var(--yk-bg);font-size:var(--yk-text-m)}
.yk-table tbody tr:last-child td{border-bottom:none}
.yk-table td:first-child{color:var(--yk-secondary);font-weight:500}
.yk-table .yk-yes{color:var(--yk-success);font-weight:500}
.yk-table .yk-no{color:var(--yk-accent-muted)}
.yk-table .yk-col-feature{color:var(--yk-accent)}

/* ---- Checklist (what's included) -------------------------------------- */
.yk-check{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem var(--yk-space-l)}
@media (max-width:600px){.yk-check{grid-template-columns:1fr}}
.yk-check li{position:relative;padding-left:2.6rem;font-size:var(--yk-text-s);color:var(--yk-secondary)}
.yk-check li::before{content:"\2713";position:absolute;left:0;top:-.1em;color:var(--yk-accent);
  font-size:var(--yk-text-m);font-weight:700}
.yk-check--muted li::before{content:"\2014";color:var(--yk-accent-muted)}

/* ---- Accordion / FAQ --------------------------------------------------- */
.yk-faq details{border-bottom:1px solid var(--yk-line);padding:var(--yk-space-s) 0}
.yk-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  font-family:"Albertus Nova",serif;color:var(--yk-primary);font-size:var(--yk-text-l)}
.yk-faq summary::-webkit-details-marker{display:none}
.yk-faq summary::after{content:"+";color:var(--yk-accent);transition:transform var(--yk-transition-fast)}
.yk-faq details[open] summary::after{content:"\2212"}
.yk-faq p{margin-top:1rem;font-size:var(--yk-text-s)}

/* ---- Review / quote card ----------------------------------------------- */
.yk-quote{background:var(--yk-white);border:1px solid var(--yk-line);border-radius:var(--yk-radius);
  padding:var(--yk-space-m);display:flex;flex-direction:column;gap:1rem}
.yk-quote__stars{color:var(--yk-accent);letter-spacing:.15em}
.yk-quote p{font-size:var(--yk-text-s);color:var(--yk-secondary);line-height:1.6;font-style:italic}
.yk-quote__who{font-family:"Albertus Nova",serif;color:var(--yk-primary);font-size:var(--yk-text-s);margin-top:auto}

/* ---- Article / prose --------------------------------------------------- */
.yk-prose{max-width:72ch;margin-inline:auto}
.yk-prose > * + *{margin-top:var(--yk-space-s)}
.yk-prose h2{font-size:var(--yk-text-2xl);margin-top:var(--yk-space-xl)}
.yk-prose h3{font-family:"Albertus Nova",serif;color:var(--yk-primary);font-size:var(--yk-text-xl);margin-top:var(--yk-space-l)}
.yk-prose p,.yk-prose li{font-size:var(--yk-text-m);color:var(--yk-secondary);line-height:1.6}
.yk-prose ul{padding-left:1.6rem;list-style:disc}
.yk-prose ul li{margin-top:.6rem}
.yk-prose a{color:var(--yk-accent);text-decoration:underline;text-underline-offset:3px}
.yk-callout{background:var(--yk-bg);border-left:3px solid var(--yk-accent);
  padding:var(--yk-space-m);border-radius:var(--yk-radius);margin-block:var(--yk-space-m)}
.yk-callout p{margin:0}

/* ---- Trust bar --------------------------------------------------------- */
.yk-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem var(--yk-space-l);
  font-family:"Sofia Pro",sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:var(--yk-text-xs);color:var(--yk-accent-muted)}
.yk-trust span{display:inline-flex;align-items:center;gap:.6em}
.yk-trust span::before{content:"\2014";color:var(--yk-accent)}

/* ---- Price block ------------------------------------------------------- */
.yk-price{display:flex;align-items:baseline;gap:.6rem;justify-content:center}
.yk-price b{font-family:"Albertus Nova",serif;color:var(--yk-primary);font-size:var(--yk-text-2xl)}
.yk-price small{color:var(--yk-accent-muted);font-size:var(--yk-text-s);text-transform:uppercase;letter-spacing:.1em}
.yk-avail{display:inline-block;margin-top:1rem;font-size:var(--yk-text-xs);text-transform:uppercase;
  letter-spacing:.12em;color:var(--yk-success)}
.yk-avail.is-sold{color:var(--yk-accent)}

/* ---- Scroll reveal ----------------------------------------------------- */
.yk-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.yk-reveal.is-in{opacity:1;transform:none}

/* ---- Custom cursor (terracotta ring, exact behavior) ------------------- */
@media (pointer:fine){
  .yk-has-cursor a,.yk-has-cursor button,.yk-has-cursor [data-cursor]{cursor:none}
  .yk-cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:100000;will-change:transform}
  .yk-cursor__ring{display:block;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
    border:1px solid var(--yk-accent);background:rgba(176,90,42,.08);opacity:0;transform:scale(.4);
    transition:opacity .25s ease,transform .25s ease}
  .yk-cursor.is-active .yk-cursor__ring{opacity:1;transform:scale(1)}
}

/* ---- WhatsApp float ---------------------------------------------------- */
.yk-wa{position:fixed;right:2rem;bottom:2rem;z-index:900;display:inline-flex;align-items:center;gap:.8rem;
  background:var(--yk-accent);color:var(--yk-bg);padding:1.2rem 1.8rem;border-radius:99px;
  font-size:var(--yk-text-xs);text-transform:uppercase;letter-spacing:.12em;
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform var(--yk-transition-fast)}
.yk-wa:hover{transform:translateY(-3px)}
/* keep the floating WhatsApp button from grazing the footer on small screens */
@media (max-width:600px){.yk-footer__bottom{padding-bottom:4.5rem}}

/* ============================================================================
   MOBILE RESPONSIVENESS LAYER (refinements, 2026-06)
   ========================================================================== */
@media (max-width:768px){
  /* tighter, comfortable gutters */
  .yk-container{width:min(100% - 2.4rem, var(--yk-container))}
  /* hero: less dead space up top, content sits nicely above the fold */
  .yk-hero .yk-hero__inner{padding-top:7.5rem !important}
  .yk-hero{min-height:88vh}
  .yk-hero__sub{font-size:var(--yk-text-m);margin-block:var(--yk-space-xs) var(--yk-space-s)}
  /* section heads don't need huge bottom margin on small screens */
  .yk-section-head{margin-bottom:var(--yk-space-l)}
  /* split media stacks with breathing room */
  .yk-split{gap:var(--yk-space-l)}
  /* tables remain swipeable; hint the scroll */
  .yk-table-wrap{position:relative}
  .yk-table th,.yk-table td{padding:1.1rem 1.2rem}
}

@media (max-width:560px){
  /* primary actions go full-width = bigger tap targets, no awkward wrapping */
  .yk-hero__actions{flex-direction:column;align-items:stretch;gap:.9rem;width:100%}
  .yk-hero__actions .yk-btn{width:100%}
  .yk-btn{padding:1.35rem 2rem;letter-spacing:.1em}
  /* trust bar: looser wrap, smaller caps */
  .yk-trust{gap:.7rem 1.4rem;font-size:var(--yk-text-2xs)}
  /* reviews badge wraps cleanly instead of overflowing */
  .yk-reviews{flex-wrap:wrap;justify-content:center;text-align:center;row-gap:.4rem;padding:1rem 1.4rem}
  /* cards a touch tighter */
  .yk-card__body{padding:var(--yk-space-s)}
  /* hero headline scales down a step for very small screens */
  .yk-hero h1{font-size:clamp(3.4rem,11vw,4.6rem)}
  /* FAQ summary text doesn't crowd the +/- marker */
  .yk-faq summary{font-size:var(--yk-text-m);gap:1.2rem}
  /* WhatsApp FAB slightly smaller so it doesn't dominate small screens */
  .yk-wa{right:1.4rem;bottom:1.4rem;padding:1rem 1.4rem;font-size:var(--yk-text-2xs)}
  /* prose comfortable measure + size on phones */
  .yk-prose p,.yk-prose li{font-size:var(--yk-text-m);line-height:1.65}
}