/* =====================================================================
   RASA gǔ lái — Recruitment Book
   Scoped entirely to <main class="hire-main">. Does not touch nav/footer.
   Single page at a time on every device size; each page is an 80%
   image area on top with a 20% caption strip below.
   ===================================================================== */

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hire-main{
  background:var(--ivory);
  padding:6.5rem 1.2rem 4rem;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.book-wrap{
  width:100%;
  max-width:700px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ===== shared page typography (used inside .page-caption) ===== */
.page-caption-text{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1rem,2.6vw,1.25rem);
  line-height:1.25;
  color:var(--brown);
  margin:0;
}
.page-caption-sub{
  font-family:var(--font-body);
  font-size:clamp(.78rem,1.6vw,.88rem);
  color:var(--brown);
  opacity:.75;
  margin:.2rem 0 0;
}

.apply-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--yellow);
  color:var(--brown);
  font-family:var(--font-heading);font-weight:700;
  font-size:.9rem;
  padding:.55rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .2s ease;
}
.apply-btn:hover{transform:translateY(-2px);}
.apply-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}

.page-number{
  position:absolute;
  bottom:.6rem;right:.9rem;
  font-family:var(--font-body);
  font-size:.68rem;letter-spacing:.08em;
  color:rgba(74,44,33,.35);
  z-index:1;
}
.page-back-cover .page-number{color:rgba(246,240,231,.4);}

/* ===== image + caption template =====
   The image area shrinks to fit whatever space the caption doesn't
   need, instead of a fixed split — so longer captions are never
   clipped, they just leave less room for the image. */
.page-media{
  flex:0 1 auto;
  aspect-ratio:1/1;
  max-height:100%;
  min-height:0;
  position:relative;
  overflow:hidden;
  background:var(--ivory);
}
.page-media-img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:top;
  display:block;
}
.page-caption{
  flex:0 0 auto;
  max-height:55%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:1rem 1.2rem .9rem;
  margin-top:.6rem;
  border-top:1px solid rgba(74,44,33,.1);
  gap:.3rem;
  overflow-y:auto;
}

/* ===== text-only pages (no image): a heading + body filling the whole card ===== */
.page-text-fill{
  flex:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:safe center;
  text-align:center;
  padding:2.2rem 1.8rem;
  gap:1rem;
  overflow-y:auto;
}
.page-head{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:clamp(1.5rem,5.5vw,2.1rem);
  line-height:1.15;
  color:var(--brown);
  margin:0;
  text-align:center;
}
.page-body{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  max-width:34rem;
  text-align:left;
}
.page-body-text{
  font-family:var(--font-body);
  font-size:clamp(.92rem,2.6vw,1.05rem);
  line-height:1.55;
  color:var(--brown);
  opacity:.85;
  margin:0;
  text-align:left;
}
.page-list{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin:0;
  padding-left:1.3rem;
  text-align:left;
}
.page-list li{
  font-family:var(--font-body);
  font-size:clamp(.92rem,2.6vw,1.05rem);
  line-height:1.4;
  color:var(--brown);
  opacity:.85;
}
.page-list--plain{
  list-style:none;
  padding-left:0;
}

.wa-btn{
  align-self:flex-start;
  font-size:1rem;
}
.page-subhead{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1rem,3vw,1.15rem);
  line-height:1.3;
  color:var(--brown);
  margin:0;
  text-align:left;
}
.email-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}
.copy-btn{
  padding:.5rem .95rem;
  border:2px solid var(--brown);
  border-radius:999px;
  background:transparent;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.85rem;
  color:var(--brown);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.copy-btn:hover{background:var(--brown);color:var(--ivory);}
.copy-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.copy-btn.is-copied{background:var(--brown);color:var(--yellow);}
.page-email{
  max-width:100%;
  padding:.55rem 1rem;
  border:2px dashed var(--brown);
  border-radius:999px;
  background:var(--yellow);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(.85rem,3.6vw,1.05rem);
  color:var(--brown);
  text-decoration:none;
  overflow-wrap:break-word;
  transition:background .2s ease, transform .2s ease;
}
.page-email:hover,
.page-email:focus-visible{
  background:var(--amber);
  transform:translateY(-2px);
}
.page-text-fill .apply-btn{margin-top:.4rem;}
.page-back-cover .page-text-fill .page-head{color:var(--ivory);}
.page-back-cover .page-text-fill .page-body-text{color:var(--ivory);opacity:.8;}

/* =====================================================================
   DEFAULT / NO-JS FALLBACK
   All pages readable top-to-bottom. This is what renders before JS
   upgrades the experience, and what remains if JS fails entirely.
   ===================================================================== */

.book{width:100%;}
.book-stage{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}
.page{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--ivory);
  border:1px solid rgba(74,44,33,.12);
  border-radius:1.1rem;
  box-shadow:0 .5rem 1.4rem rgba(74,44,33,.1);
  min-height:420px;
  overflow:hidden;
}
.page.page-back-cover{background:var(--brown);min-height:280px;}

.book-controls,
.book-side-nav{display:none;}

/* =====================================================================
   JS-ENHANCED "BOOK" MODE
   Applied once js/book.js confirms it can run (class added to #bookWrap).
   Single page at a time, every device size — only the overall book
   size scales up for larger viewports.
   ===================================================================== */

.book-wrap.js-ready{position:relative;}

.book-wrap.js-ready .book{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:.8rem;
}

.book-wrap.js-ready .book-stage{
  position:relative;
  flex:1;
  width:100%;
  max-width:640px;
  margin:0 auto;
  height:70vh;
  min-height:360px;
  background:var(--brown);
  border-radius:1.4rem;
  box-shadow:0 1.6rem 3.2rem rgba(74,44,33,.35);
  overflow:hidden;
  perspective:2400px;
}

.book-wrap.js-ready .page{
  position:absolute;
  inset:0;
  min-height:0;
  margin:0;
  border:none;
  border-radius:1.4rem;
  box-shadow:none;
  background:var(--ivory);
  display:none;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.book-wrap.js-ready .page.page-back-cover{background:var(--brown);}

.book-wrap.js-ready .page.is-current{display:flex;z-index:2;}

/* page-turn animation, anchored at the outer edge it's turning toward */
.book-wrap.js-ready .page.is-turning-out-next{
  display:flex;z-index:6;
  transform-origin:left center;
  animation:flipOutNext .6s cubic-bezier(.55,.06,.68,.19) forwards;
}
.book-wrap.js-ready .page.is-turning-in-next{
  display:flex;z-index:4;
  transform-origin:left center;
  animation:flipInNext .6s cubic-bezier(.25,.46,.45,.94) forwards;
}
.book-wrap.js-ready .page.is-turning-out-prev{
  display:flex;z-index:6;
  transform-origin:right center;
  animation:flipOutPrev .6s cubic-bezier(.55,.06,.68,.19) forwards;
}
.book-wrap.js-ready .page.is-turning-in-prev{
  display:flex;z-index:4;
  transform-origin:right center;
  animation:flipInPrev .6s cubic-bezier(.25,.46,.45,.94) forwards;
}

@keyframes flipOutNext{
  0%{transform:rotateY(0deg);box-shadow:0 0 0 rgba(0,0,0,0);}
  50%{box-shadow:.6rem 0 1.4rem rgba(0,0,0,.25);}
  100%{transform:rotateY(-160deg);}
}
@keyframes flipInNext{
  0%{transform:rotateY(160deg);}
  100%{transform:rotateY(0deg);}
}
@keyframes flipOutPrev{
  0%{transform:rotateY(0deg);}
  50%{box-shadow:-.6rem 0 1.4rem rgba(0,0,0,.25);}
  100%{transform:rotateY(160deg);}
}
@keyframes flipInPrev{
  0%{transform:rotateY(-160deg);}
  100%{transform:rotateY(0deg);}
}

@media (prefers-reduced-motion: reduce){
  .book-wrap.js-ready .page.is-turning-out-next,
  .book-wrap.js-ready .page.is-turning-in-next,
  .book-wrap.js-ready .page.is-turning-out-prev,
  .book-wrap.js-ready .page.is-turning-in-prev{
    animation:none !important;
    transform:none !important;
  }
}

.book-side-nav{
  flex:0 0 auto;
  width:2.6rem;height:2.6rem;
  border-radius:50%;
  border:1px solid rgba(74,44,33,.2);
  background:var(--ivory);
  color:var(--brown);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.book-side-nav:hover{background:var(--yellow);}
.book-side-nav:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.book-side-nav:disabled{opacity:.3;cursor:default;}
.book-wrap.js-ready .book-side-nav{display:flex;}

.book-wrap.js-ready .book-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  margin-top:1.4rem;
}
.book-ctrl-btn{
  font-family:var(--font-heading);font-weight:600;
  font-size:.85rem;letter-spacing:.03em;
  background:transparent;
  border:1px solid rgba(74,44,33,.3);
  color:var(--brown);
  padding:.6rem 1.1rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease;
}
.book-ctrl-btn:hover{background:rgba(74,44,33,.08);}
.book-ctrl-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.book-ctrl-btn:disabled{opacity:.35;cursor:default;}
.book-progress{
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--brown);
  opacity:.6;
  min-width:3.6rem;
  text-align:center;
}

/* ===== responsive: same single-page layout everywhere, book just
   scales down its max size on narrower viewports ===== */
@media (max-width:720px){
  .book-wrap.js-ready .book-stage{max-width:92vw;}
}

@media (max-width:480px){
  .hire-main{padding-top:5.5rem;}
  .book-side-nav{display:none !important;}
  .page-caption-text{font-size:clamp(.9rem,4.4vw,1.05rem);}
}