/* careers-page.css — Careers page (hero photo, stats bar, why-join, photo mosaic, job filter list, hiring steps, testimonials) */

/* ---------- hero ---------- */
.car-hero{padding-bottom:0;overflow:visible}
.car-hero .container{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.car-hero h1 em{color:var(--red)}
.car-photo{position:relative;border-radius:22px 22px 0 0;overflow:hidden;min-height:320px;align-self:end;
  background:linear-gradient(155deg,#4A4B55 0%,#23242B 55%,#6E0A13 100%)}
.car-photo::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 72% 28%,rgba(211,27,43,.45),transparent 55%),
  radial-gradient(circle at 20% 80%,rgba(255,255,255,.06),transparent 50%)}
.car-photo::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:44px;color:rgba(255,255,255,.25)}

/* ---------- stats bar ---------- */
.stats-bar{background:#fff;border:1px solid #F3E5E2;border-radius:18px;box-shadow:0 18px 40px -24px rgba(30,10,10,.18);display:flex;justify-content:space-between;flex-wrap:wrap;padding:26px 34px;gap:18px;margin-top:-1px;position:relative;z-index:2}
.stats-bar li{display:flex;align-items:center;gap:12px;flex:1;min-width:150px}
.stats-bar li:not(:last-child){border-right:1px solid #F3E7E4;padding-right:18px}
.stats-bar .es-ico{width:44px;height:44px;background:#FBEFEC;font-size:18px;flex:none;margin:0}
.stats-bar b{display:block;font-size:20px;font-weight:800;line-height:1.15}
.stats-bar span{font-size:11.5px;color:var(--muted)}

/* ---------- why join ---------- */
.why-grid{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start}
.why-items{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px}
.why-item{display:flex;gap:13px}
.why-item .es-ico{flex:none;width:42px;height:42px;background:#FBEFEC;font-size:17px}
.why-item h4{font-size:14px;font-weight:800}
.why-item p{font-size:12px;color:var(--body);line-height:1.55;margin-top:3px}

/* ---------- life mosaic ---------- */
.life-band{background:#FBF3F1}
.mosaic{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:18px}
.mosaic figure{margin:0;min-width:0}
.mosaic .big{grid-row:1/3}
.mosaic .ph{border-radius:16px;background-size:cover;background-position:center;aspect-ratio:4/3;transition:transform .3s,box-shadow .3s}
.mosaic .big .ph{aspect-ratio:auto;height:100%;min-height:300px}
.mosaic figure:hover .ph{transform:translateY(-4px);box-shadow:var(--shadow)}
.mosaic figcaption{font-size:12.5px;font-weight:700;margin-top:9px}
.ph.g1{background-image:linear-gradient(150deg,#4E6E4E,#22301F),radial-gradient(circle at 60% 20%,rgba(255,255,255,.25),transparent 55%)}
.ph.g2{background-image:linear-gradient(150deg,#5C7A5C,#2C3B28),radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),transparent 50%)}
.ph.g3{background-image:linear-gradient(150deg,#C9CCD6,#8E93A3),radial-gradient(circle at 70% 30%,rgba(255,255,255,.4),transparent 60%)}
.ph.g4{background-image:linear-gradient(150deg,#4A4B55,#23242B),radial-gradient(circle at 60% 60%,rgba(211,27,43,.35),transparent 55%)}
.ph.g5{background-image:linear-gradient(150deg,#7FA8C9,#41678A),radial-gradient(circle at 40% 20%,rgba(255,255,255,.35),transparent 55%)}

/* ---------- job list ---------- */
.job-cards{display:grid;gap:14px}
.job-card{display:grid;grid-template-columns:1.5fr .8fr .6fr auto;grid-template-areas:"title loc type apply" "desc desc desc apply";column-gap:20px;row-gap:6px;align-items:center;background:#fff;border:1px solid #F3E5E2;border-radius:16px;padding:20px 26px;transition:border-color .2s,box-shadow .2s}
.job-card:hover{border-color:#EFC0BA;box-shadow:var(--shadow)}
.job-card.hidden{display:none}
.jc-title{grid-area:title;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jc-title h4{font-size:15.5px;font-weight:800}
.jc-badge{font-size:10px;font-weight:700;color:#6B6B72;background:#F7F1F0;border:1px solid #EFE3E0;border-radius:99px;padding:3px 10px}
.job-card>span{font-size:12.5px;color:var(--body)}
.jc-loc{grid-area:loc}
.jc-type{grid-area:type}
.jc-desc{grid-area:desc;font-size:12px;color:var(--muted)}
.jc-apply{grid-area:apply;justify-self:end}

/* ---------- hiring steps ---------- */
.hire-grid{display:grid;grid-template-columns:320px 1fr;gap:52px;align-items:center}
.hire-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative}
.hire-steps::before{content:'';position:absolute;top:30px;left:12%;right:12%;border-top:2px dotted #F0CFCB}
.hire-step{text-align:center;position:relative}
.hire-step .es-ico{width:60px;height:60px;font-size:23px;background:#FBEFEC;box-shadow:inset 0 0 0 1.5px #F3DEDA;margin-bottom:12px}
.hire-step b{display:block;font-size:14px;font-weight:800;margin-bottom:5px}
.hire-step p{font-size:11.5px;color:var(--body);line-height:1.5;max-width:150px;margin:0 auto}

/* ---------- testimonials ---------- */
.quote-band{background:linear-gradient(180deg,#FBF3F1,#F8ECE9)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:#fff;border-radius:18px;padding:26px;box-shadow:0 16px 36px -22px rgba(30,10,10,.16);display:flex;flex-direction:column}
.quote p{font-size:13.5px;line-height:1.65;font-weight:600;flex:1}
.quote p::before{content:'“';color:var(--red);font-size:22px;font-weight:800;margin-right:2px}
.quote-who{display:flex;align-items:center;gap:11px;margin-top:18px}
.quote-who .qa{width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg,#EAD5D2,#C9A29C);position:relative;overflow:hidden;flex:none}
.quote-who .qa::after{content:'';position:absolute;left:50%;bottom:-20%;transform:translateX(-50%);width:64%;height:66%;border-radius:45% 45% 0 0;background:rgba(110,35,40,.35)}
.quote-who .qa::before{content:'';position:absolute;left:50%;top:16%;transform:translateX(-50%);width:34%;aspect-ratio:1;border-radius:50%;background:rgba(110,35,40,.38)}
.quote-who b{display:block;font-size:12.5px;font-weight:800}
.quote-who small{font-size:11px;color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:1060px){
  .why-grid,.hire-grid{grid-template-columns:1fr;gap:30px}
  .why-items{grid-template-columns:1fr 1fr}
  .stats-bar li{min-width:40%}
  .stats-bar li:not(:last-child){border-right:0;padding-right:0}
}
@media(max-width:880px){
  .car-hero .container{grid-template-columns:1fr}
  .car-photo{min-height:240px;border-radius:22px}
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic .big{grid-column:1/-1;grid-row:auto}
  .mosaic .big .ph{min-height:0;aspect-ratio:16/9}
  .job-card{grid-template-columns:1fr auto;grid-template-areas:"title apply" "loc apply" "type apply" "desc desc";row-gap:3px}
  .hire-steps{grid-template-columns:1fr 1fr;row-gap:26px}
  .hire-steps::before{display:none}
  /* testimonials: horizontal snap slider on mobile */
  .quote-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px;padding:4px 24px 16px;scrollbar-width:none}
  .quote-grid::-webkit-scrollbar{display:none}
  .quote{flex:0 0 82%;scroll-snap-align:center}
}
@media(max-width:560px){
  .why-items{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr}
}

/* ---------- job detail (job.html) ---------- */
.job-detail{max-width:820px;margin:0 auto}
.jd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:6px}
.jd-head h1{font-size:clamp(24px,3.2vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.jd-meta{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 6px;font-size:13px;color:var(--body)}
.jd-summary{font-size:15px;line-height:1.7;color:#2B2B30;font-weight:600;margin:14px 0 6px}
.jd-body h2{font-size:19px;font-weight:800;margin:26px 0 10px}
.jd-body ul{margin:0 0 8px}
.jd-body li{display:flex;gap:10px;font-size:14px;line-height:1.65;color:#2B2B30;padding:4px 0;align-items:baseline}
.jd-body li::before{content:'✓';flex:none;width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;font-size:9.5px;display:inline-flex;align-items:center;justify-content:center;transform:translateY(2px)}
.job-detail>.btn{margin-top:26px}

/* ---------- job detail share row ---------- */
.jd-share{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jd-share span{font-size:13px;font-weight:700;color:var(--muted)}
.jd-share a{font-size:13px;font-weight:600;border:1.5px solid #E3D9D7;border-radius:999px;padding:7px 16px;transition:border-color .2s,color .2s}
.jd-share a:hover{border-color:var(--red);color:var(--red)}