/* ============================================================
   talents-v2.css
   Variant of /talents that reframes the page around
   "we prepare & support our talents" — for an employer audience.
   Loaded AFTER talents.css, so selectors here override v1 where needed.
   ============================================================ */

/* HERO V2 — softer, more editorial. Less amber, more teal */
.tl-hero-v2{padding:104px 0 88px;background:linear-gradient(180deg,#f4ece0 0%, var(--bg) 100%)}
.tl-hero-v2 .crumb{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-700);
  margin-bottom:22px;display:inline-flex;align-items:center;gap:10px;
}
.tl-hero-v2 .crumb::before{content:"";width:28px;height:1px;background:var(--teal-700);display:block}

/* Tone down the giant H1 a touch from v1's clamp(40,5.6vw,76) */
.tl-hero-v2 h1.big{
  font-size:clamp(36px,4.8vw,64px);
  line-height:1.04;
  margin:0 0 24px;
}
.tl-hero-v2 h1.big em{font-style:italic;font-weight:800;color:var(--teal-700)}

.tl-hero-v2 .lead-v2{
  font-family:'Manrope',sans-serif;
  font-size:18.5px;line-height:1.6;color:var(--ink-2);
  max-width:560px;margin:0 0 28px;text-wrap:pretty;
}

/* Teal-tinted ghost button — less shouty than amber */
.btn-teal-ghost{
  border:1px solid var(--teal-700);
  color:var(--teal-700);
  background:transparent;
}
.btn-teal-ghost:hover{
  background:var(--teal-700);
  color:#fff;
  border-color:var(--teal-700);
}

/* Hero art: same talents-css .tl-art rules apply; just override accent */
.tl-hero-v2 .tl-art .stamp{background:rgba(15,58,68,.88)}
.tl-hero-v2 .tl-progress{background:var(--teal-500)}

/* ============================================================
   PROMISE BAND (intro after hero)
   Reuses .philo-grid layout shape but renamed for v2 spacing
   ============================================================ */
.v2-promise .promise-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start;
}
.v2-promise .promise-grid h2{
  font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-.022em;
  color:var(--teal-900);margin:8px 0 0;font-weight:700;text-wrap:balance;
}
.v2-promise .promise-grid .body p{
  font-size:17px;color:var(--ink-2);margin:0 0 20px;line-height:1.7;text-wrap:pretty;
}
.v2-promise .promise-grid .body p:last-child{margin-bottom:0}

/* The classic philo-tag uses amber — keep it, but the section-head .mono variant we mark teal */
.v2-mono-amber{color:var(--amber-ink) !important}

/* ============================================================
   JOURNEY GRID — five large numbered cards
   ============================================================ */
.v2-journey-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.v2-journey-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px 22px 26px;
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.v2-journey-card:hover{
  transform:translateY(-4px);
  border-color:var(--teal-500);
  box-shadow:0 18px 40px -22px rgba(15,58,68,.18);
}
.v2-journey-card .jc-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:.18em;
  color:var(--amber);
  font-weight:600;
  margin-bottom:14px;
}
.v2-journey-card h4{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:var(--teal-900);
  letter-spacing:-.01em;
  line-height:1.2;
}
.v2-journey-card p{
  margin:0;
  font-size:14.5px;
  color:var(--ink-2);
  line-height:1.55;
}

@media (max-width:1100px){
  .v2-journey-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .v2-journey-grid{grid-template-columns:1fr;gap:14px}
}

/* ============================================================
   GFK FEATURE — proof block
   ============================================================ */
.v2-gfk-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;
}
.v2-gfk-body h2{
  font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.02em;
  color:var(--teal-900);margin:8px 0 18px;font-weight:700;text-wrap:balance;
}
.v2-gfk-body p{
  font-size:16.5px;color:var(--ink-2);line-height:1.7;margin:0 0 16px;
}
.v2-gfk-body p:last-child{margin-bottom:0}
.v2-gfk-tag-list{
  margin-top:22px !important;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:14.5px !important;
  color:var(--ink-3) !important;
  font-style:italic;
}

.v2-gfk-photos{display:grid;grid-template-rows:auto auto;gap:18px}
.v2-gfk-photo{margin:0;border-radius:8px;overflow:hidden;background:var(--teal-900);position:relative}
.v2-gfk-photo img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:4/3}
.v2-gfk-photo figcaption{
  padding:12px 16px;
  background:#fff;border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}

@media (max-width:900px){
  .v2-promise .promise-grid,
  .v2-gfk-grid{grid-template-columns:1fr;gap:36px}
}

/* ============================================================
   SPRACHSCHULE CALLOUT — clickable wide card
   ============================================================ */
.v2-school-card{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.v2-school-card:hover{
  transform:translateY(-3px);
  border-color:var(--teal-700);
  box-shadow:0 22px 50px -28px rgba(15,58,68,.25);
}
.v2-school-text{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.v2-school-text h3{
  margin:6px 0 10px;font-size:clamp(24px,2.6vw,32px);line-height:1.1;
  color:var(--teal-900);letter-spacing:-.02em;font-weight:700;
}
.v2-school-text p{margin:0 0 14px;color:var(--ink-2);font-size:16px;line-height:1.55}
.v2-school-arrow{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-700);font-weight:600;
  transition:color .2s, gap .2s;
}
.v2-school-card:hover .v2-school-arrow{color:var(--amber)}
.v2-school-photo{position:relative;min-height:240px;background:var(--teal-900)}
.v2-school-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
  .v2-school-card{grid-template-columns:1fr}
  .v2-school-photo{min-height:220px;aspect-ratio:16/10}
}

/* ============================================================
   QUOTE / TESTIMONIAL
   ============================================================ */
.v2-quote{
  background:var(--teal-900);
  color:#fff;
  padding:96px 0;
  position:relative;
}
.v2-quote blockquote{
  margin:0 auto;max-width:880px;text-align:center;
  position:relative;padding:0 24px;
}
.v2-quote-mark{
  display:block;
  font-family:'Manrope',serif;
  font-size:120px;line-height:.8;
  color:var(--amber);
  margin-bottom:8px;
  font-weight:800;
}
.v2-quote blockquote p{
  font-family:'Manrope',sans-serif;
  font-size:clamp(20px,2vw,26px);
  line-height:1.5;
  color:#fff;
  font-weight:500;
  margin:0 0 28px;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.v2-quote blockquote footer{
  display:flex;justify-content:center;
}
.v2-quote-role{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}

/* ============================================================
   APPLY CARD — compact, low-key, invitational
   ============================================================ */
.v2-apply{background:linear-gradient(180deg,#fff 0%, var(--bg) 100%)}
.v2-apply-card{
  max-width:680px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:44px 44px 40px;
  box-shadow:0 6px 24px -14px rgba(15,58,68,.1);
}
.v2-apply-card h3{
  margin:8px 0 10px;
  font-size:clamp(22px,2.4vw,30px);line-height:1.1;
  color:var(--teal-900);letter-spacing:-.018em;font-weight:700;
}
.v2-apply-sub{
  font-size:15.5px;line-height:1.6;color:var(--ink-2);
  margin:0 0 28px;
}

.v2-apply-form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.v2-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v2-form-row .field{margin-bottom:16px}
@media (max-width:560px){.v2-form-row{grid-template-columns:1fr}}

.v2-apply-form textarea{
  min-height:96px;resize:vertical;
  font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:#fff;
}
.v2-apply-form textarea:focus{
  outline:none;border-color:var(--teal-700);
  box-shadow:0 0 0 3px rgba(31,91,105,.12);
}

.v2-file-drop{padding:18px;font-size:13.5px}
.v2-file-drop strong{font-size:14px}

.v2-form-actions{
  margin-top:8px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.v2-form-actions .small{
  font-size:12.5px;color:var(--ink-3);line-height:1.4;flex:1;min-width:200px;
}

/* Success state — reuse .form-success but scope spacing */
.v2-apply-card .form-success{margin-top:8px}

/* ============================================================
   RESPONSIVE TIDY-UP
   ============================================================ */
@media (max-width:900px){
  .tl-hero-v2{padding:72px 0 56px}
  .v2-school-text{padding:32px 28px}
  .v2-apply-card{padding:32px 24px 28px}
  .v2-quote{padding:72px 0}
}

/* ============================================================
   COMPACT GALLERY (v2) — tighter version of .gallery-bg
   ============================================================ */
.v2-gallery-compact{padding:64px 0}
.v2-gallery-compact .container{max-width:1120px}
.v2-gallery-compact .section-head{margin-bottom:32px}
.v2-gallery-compact .section-head h2{font-size:clamp(26px,2.6vw,32px)}
.v2-gallery-compact .section-head p{font-size:15px}
.v2-gallery-compact .masonry{column-count:4;column-gap:12px}
.v2-gallery-compact .masonry .photo{margin-bottom:12px;border-radius:6px}
.v2-gallery-compact .masonry .photo .cap{font-size:10px;left:10px;bottom:10px}
.v2-gallery-compact .masonry .photo .cap .tag{font-size:9px;padding:3px 8px}
@media (max-width:1100px){.v2-gallery-compact .masonry{column-count:3}}
@media (max-width:760px){.v2-gallery-compact .masonry{column-count:2}}
@media (max-width:460px){.v2-gallery-compact .masonry{column-count:1}}

/* ============================================================
   CARD-STACK SLIDER (v2 gallery) — cards recede behind the front
   ============================================================ */
.cardstack{position:relative;max-width:430px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px}
.cs-viewport{position:relative;width:100%;aspect-ratio:4/5;perspective:1400px}
.cs-card{
  position:absolute;inset:0;margin:auto;
  border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--teal-900);
  box-shadow:0 34px 64px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  transform-origin:center bottom;
  will-change:transform,opacity;
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .55s ease;
}
.cs-card.is-front{cursor:zoom-in}
.cs-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cs-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(8,28,33,.82) 100%);pointer-events:none}
.cs-cap{
  position:absolute;left:18px;right:18px;bottom:18px;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  opacity:0;transition:opacity .4s ease .12s;margin:0;
}
.cs-card.is-front .cs-cap{opacity:1}
.cs-tag{background:var(--amber);color:#1a1207;padding:4px 10px;border-radius:4px;font-weight:600;font-size:10px;letter-spacing:.1em}
.cs-controls{display:flex;align-items:center;gap:18px}
.cs-arrow{
  width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--teal-700);
  font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 20px -12px rgba(15,58,68,.45);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.cs-arrow:hover{background:var(--amber);border-color:var(--amber);color:#1a1207;transform:scale(1.07)}
.cs-dots{display:flex;align-items:center;gap:9px}
.cs-dot{width:9px;height:9px;border-radius:50%;background:rgba(15,58,68,.22);border:0;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.cs-dot:hover{background:rgba(15,58,68,.42)}
.cs-dot.active{background:var(--amber);transform:scale(1.25)}
@media (max-width:560px){
  .cardstack{max-width:300px;gap:24px}
  .cs-arrow{width:40px;height:40px;font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .cs-card{transition:opacity .3s ease}
}

/* ============================================================
   WEEKLY MEETINGS (v2) — two community photos
   ============================================================ */
.v2-weekly-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.v2-weekly-photo{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--teal-900);aspect-ratio:16/10;box-shadow:var(--card-shadow)}
.v2-weekly-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.v2-weekly-photo:hover img{transform:scale(1.03)}
@media (max-width:700px){.v2-weekly-grid{grid-template-columns:1fr}}