/* ============================================================
   YogSetu — REQUIREMENT-DETAIL.CSS
   Page-scoped styles for requirement-detail.html. Mirrors the visual
   language built for teacher-profile.html (dark hero with a pop-out
   3D element, glass-panel stats, dark availability meter) adapted to
   a job-requirement context — the "photo" pop-out becomes a big
   style icon card since there's no person to show, and the
   availability meter shows the days/times the CLIENT needs instead
   of when a teacher is free.
   ============================================================ */

/* ---- 1. HERO ---- */
.rd-hero{
  position:relative;
  overflow:hidden;
  max-width:1240px;margin:16px auto 0;padding:0 16px;
}
.rd-hero-bg{
  position:absolute;top:0;left:16px;right:16px;height:100%;
  border-radius:var(--radius-card);overflow:hidden;z-index:0;
  background:
    radial-gradient(46% 60% at 84% 18%,rgba(217,119,87,.26) 0%,transparent 62%),
    radial-gradient(38% 55% at 12% 85%,rgba(154,150,138,.2) 0%,transparent 60%),
    linear-gradient(160deg,#201F1B 0%,#1A1A18 48%,#171614 100%);
}
.rd-hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;gap:clamp(24px,4vw,48px);
  min-height:clamp(480px,62vh,600px);
  padding:clamp(36px,5.6vh,60px) clamp(20px,3.6vw,20px) clamp(36px,5.6vh,60px) clamp(28px,4.4vw,56px);
}
.rd-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:rgba(241,237,224,.55);margin-bottom:clamp(16px,2.4vh,22px);
}
.rd-breadcrumb a{color:rgba(241,237,224,.75);}
.rd-breadcrumb a:hover{color:#FFFDF7;}
.rd-tags{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  color:#EAB08D;margin-bottom:clamp(14px,2vh,20px);
}
.rd-tags .sep{color:rgba(234,176,141,.4);}
.rd-title{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.02em;
  color:#FFFDF7;max-width:16ch;
}
.rd-meta{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  margin-top:clamp(16px,2.4vh,22px);
  font-size:13.5px;color:rgba(241,237,224,.75);
}
.rd-meta span{display:inline-flex;align-items:center;gap:6px;}
.rd-desc{
  margin-top:clamp(16px,2.4vh,22px);
  font-size:15px;line-height:1.65;color:rgba(241,237,224,.8);max-width:50ch;
}
.rd-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.2vh,30px);}
.rd-cta .btn-secondary{background:rgba(255,255,255,.12);color:#FFFDF7;border:1px solid rgba(255,255,255,.28);}
.rd-cta .btn-secondary:hover{background:rgba(255,255,255,.2);}
.rd-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;
}

/* -- pop-out icon card (stands in for the "photo" pop-out on teacher-profile) -- */
.rd-hero-figure{position:relative;height:88%;perspective:1200px;}
.rd-hero-icon{
  position:relative;height:100%;border-radius:28px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-1.5deg);
  box-shadow:0 60px 90px -30px rgba(0,0,0,.6), 0 20px 40px -20px rgba(217,119,87,.3);
  border:1px solid rgba(255,255,255,.14);
}
.rd-hero-icon svg{width:34%;height:34%;stroke:#FFFDF7;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.92;}
.rd-icon--hatha{background:linear-gradient(150deg,#D97757,#A65032);}
.rd-icon--ashtanga{background:linear-gradient(150deg,#3A3935,#1A1A18);}
.rd-icon--prenatal{background:linear-gradient(150deg,#8C887D,#55534C);}
.rd-icon--corporate{background:linear-gradient(150deg,#55534C,#1A1A18);}
.rd-icon--therapeutic{background:linear-gradient(150deg,#A65032,#3A3935);}
.rd-icon--generic{background:linear-gradient(150deg,#55534C,#A65032);}

.rd-float-badge{
  position:absolute;left:-18px;bottom:16%;z-index:4;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.96);border-radius:14px;padding:10px 16px 10px 12px;
  box-shadow:0 24px 40px -18px rgba(0,0,0,.5);
}
.rd-float-badge svg{width:16px;height:16px;flex-shrink:0;stroke:var(--marigold-deep);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.rd-float-badge strong{display:block;font-size:12.5px;color:var(--ink);}
.rd-float-badge span{display:block;font-size:10.5px;color:var(--ink-faint);}

.rd-float-price{
  position:absolute;right:-14px;top:10%;z-index:4;
  background:rgba(23,22,20,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:10px 16px;
  color:#FFFDF7;box-shadow:0 20px 34px -16px rgba(0,0,0,.5);
}
.rd-float-price strong{display:block;font-family:'Fraunces',serif;font-size:17px;}
.rd-float-price span{font-size:10.5px;color:rgba(241,237,224,.6);}

@media (max-width:1024px){
  .rd-hero-inner{grid-template-columns:1fr;}
  /* Grid items default to stretch, but without an explicit width this one
     was sizing to its (tiny) SVG-icon content instead — leaving no real
     room for the two floating badges, which collided in the middle of a
     ~90px-wide card. Force it to actually fill the track. */
  .rd-hero-figure{order:-1;width:100%;height:clamp(240px,36vh,300px);max-width:360px;margin:0 auto clamp(20px,3vh,28px);}
}
@media (max-width:640px){
  .rd-hero{margin-top:10px;padding:0 10px;}
  .rd-hero-bg{left:10px;right:10px;border-radius:20px;}
  .rd-hero-inner{padding:30px 18px 32px;min-height:0;}
  .rd-title{font-size:28px;}
  .rd-float-badge{left:-10px;bottom:10%;padding:8px 12px 8px 10px;}
  .rd-float-price{right:-8px;top:8%;padding:8px 12px;}
}

/* ---- 2. STAT BANNER ---- */
.rd-stats-band{background:#F6F5F1;padding:clamp(36px,5.6vh,52px) clamp(20px,4vw,64px);}
.rd-stats{max-width:960px;margin:0 auto;}

/* ---- 3. WHAT THEY'RE LOOKING FOR ---- */
.rd-section{max-width:1000px;margin:0 auto;padding:clamp(44px,6.4vh,72px) clamp(20px,4vw,64px);}
.rd-section + .rd-section{border-top:1px solid var(--line-soft);}
.rd-section h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:clamp(24px,2.6vw,30px);
  letter-spacing:-.02em;color:var(--ink);margin-bottom:20px;
}
.rd-checklist{list-style:none;display:flex;flex-direction:column;gap:14px;}
.rd-checklist li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink-soft);line-height:1.5;}
.rd-checklist .tick{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:rgba(217,119,87,.14);color:var(--marigold-deep);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.rd-checklist .tick svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---- 4. SCHEDULE NEEDED — dark meter ---- */
.rd-schedule{background:linear-gradient(160deg,#201F1B 0%,#1A1A18 48%,#171614 100%);}
.rd-schedule .rd-section{max-width:1000px;}
.rd-schedule h2{color:#FFFDF7;}
.rd-schedule .sub{color:rgba(241,237,224,.6);font-size:14px;margin-top:-10px;margin-bottom:24px;}

.rd-meter-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.6vw,16px);}
.rd-meter-day{display:flex;flex-direction:column;align-items:center;gap:8px;}
.rd-meter-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,237,224,.5);}
.rd-meter-slot{
  width:100%;max-width:38px;height:26px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
}
.rd-meter-slot.is-needed{
  background:linear-gradient(180deg,#EAB08D,var(--marigold));
  border-color:rgba(217,119,87,.7);box-shadow:0 6px 16px -6px rgba(217,119,87,.6);
}
.rd-meter-time{font-size:10px;color:rgba(241,237,224,.45);}

/* ---- 5. ABOUT THE CLIENT ---- */
.rd-client-list{list-style:none;display:flex;flex-direction:column;}
.rd-client-list li{
  display:flex;align-items:flex-start;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line-soft);
}
.rd-client-list li:last-child{border-bottom:none;}
.rd-client-list .ico{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:rgba(217,119,87,.14);color:var(--marigold-deep);
  display:flex;align-items:center;justify-content:center;
}
.rd-client-list .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.rd-client-list h4{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:2px;}
.rd-client-list p{font-size:13.5px;color:var(--ink-soft);}

/* ---- 6. SIMILAR REQUIREMENTS ---- */
.rd-similar-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;}
.rd-similar-rail::-webkit-scrollbar{display:none;}
.rd-similar-card{
  flex:0 0 auto;width:clamp(220px,30vw,260px);scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.rd-similar-card:hover{border-color:rgba(217,119,87,.4);box-shadow:0 20px 36px -24px rgba(26,26,24,.35);transform:translateY(-3px);}
.rd-similar-card .tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--marigold-deep);background:rgba(217,119,87,.14);padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
.rd-similar-card h4{font-family:'Fraunces',serif;font-weight:500;font-size:15.5px;line-height:1.3;color:var(--ink);margin-bottom:8px;}
.rd-similar-card .meta{font-size:12px;color:var(--ink-faint);margin-bottom:10px;}
.rd-similar-card .price{font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:var(--pine);}

/* ---- STICKY MOBILE APPLY BAR ---- */
.rd-sticky-cta{
  position:fixed;left:50%;bottom:max(18px, env(safe-area-inset-bottom));
  transform:translate(-50%, 150%);z-index:80;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:9px;border-radius:var(--radius-pill);
  box-shadow:0 22px 50px -18px rgba(23,22,20,.55), 0 2px 8px rgba(23,22,20,.12);
  opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.75,.25,1), opacity .3s ease;
  max-width:calc(100vw - 24px);
}
.rd-sticky-cta.show{transform:translate(-50%, 0);opacity:1;pointer-events:auto;}
@media (max-width:640px){
  .rd-sticky-cta{left:12px;right:12px;transform:translateY(150%);width:auto;max-width:none;justify-content:center;padding:8px;bottom:max(12px, env(safe-area-inset-bottom));}
  .rd-sticky-cta.show{transform:translateY(0);}
  .rd-sticky-cta .btn{flex:1;padding:13px 12px;font-size:16px;}
}