/* Home-page-specific sections. Tokens, resets, .btn, .blog-card, .academia-footer
   live in academia-shared.css (loaded first). */

.home-page .nav-real{display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px;}

/* Astra's real global footer (map + old physical address) must not also
   render below our custom one - London hides it the same way. */
body.page-id-25066 #colophon,
body.page-id-52 #colophon,
body.page-id-64 #colophon,
body.page-id-25320 #colophon,
body.page-id-1639 #colophon,
body.page-id-31588 #colophon{ display:none !important; }

/* HERO - full-bleed photo background (same treatment as London's hero).
   .hero itself is just a thin wrapper; .hero-photo does the real
   full-viewport-height, edge-to-edge work so the shared transparent-header
   component's white nav text stays readable over the photo. */
.home-page .hero{padding-block:0 36px;}
.home-page .hero-photo{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding-block:150px 64px;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:920px){.home-page .hero-photo{padding-block:110px 48px;}}
.home-page .hero .trust-strip{margin-top:56px;}
@media (max-width:920px){.home-page .hero .trust-strip{margin-top:36px;}}
.home-page .hero-grid{display:grid; grid-template-columns:1fr; align-items:center;}
.home-page .hero-grid-solo{max-width:720px;}
.home-page .hero .eyebrow{color:var(--sky);}
.home-page .hero h1{font-size:clamp(2.3rem,4.6vw,3.45rem); font-weight:600; line-height:1.12; margin-top:14px; color:#fff;}
.home-page .hero h1 .hl{color:var(--sky);}
.home-page .hero .lede{color:#9FB7C4; font-size:1.24rem; max-width:52ch; margin-top:18px;}
.home-page .hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.home-page .hero-actions .btn-ghost{border-color:rgba(255,255,255,.4); color:#fff;}
.home-page .hero-actions .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.12);}
.home-page .hero-trust{margin-top:22px; font-size:0.989rem; color:#9FB7C4; display:flex; align-items:center; gap:8px;}
.home-page .hero-trust svg{flex:none;}

/* Landing (Home) hero - no gradient wash on the photo (per request).
   text-shadow + brighter secondary text substitute for the contrast the
   gradient used to give; scoped to .home-landing since home.css is shared
   with Sertifikati/Časovi/IELTS heroes. */
.home-landing .hero .eyebrow,
.home-landing .hero h1,
.home-landing .hero .lede,
.home-landing .hero-trust{
  text-shadow: 0 2px 14px rgba(5,10,16,.7), 0 1px 3px rgba(5,10,16,.9);
}
.home-landing .hero .eyebrow{color:#fff; font-weight:700;}
.home-landing .hero .eyebrow,
.home-landing .hero h1{
  text-shadow: 0 2px 14px rgba(5,10,16,.85), 0 1px 3px rgba(5,10,16,.95), 0 0 24px rgba(5,10,16,.5);
}
/* transparent header sits directly on the ungraded photo - nav text needs
   the same shadow while the header isn't scrolled yet */
body.page-template-template-home.academia-header-transparent-hero #masthead:not(.is-scrolled) .main-header-menu .menu-link,
body.page-template-template-home.academia-header-transparent-hero #masthead:not(.is-scrolled) .main-header-menu .menu-item > a{
  text-shadow: 0 1px 8px rgba(5,10,16,.8), 0 1px 2px rgba(5,10,16,.9);
}
.home-landing .hero h1 .hl{color:#FFB070;}
.home-landing .hero .lede{color:rgba(255,255,255,.92);}
.home-landing .hero-trust{color:rgba(255,255,255,.9);}
.home-landing .hero-actions .btn-ghost{background:rgba(7,15,23,.35);}
.home-landing .hero-actions .btn-ghost:hover{background:rgba(7,15,23,.5);}
.home-page .hero-photo-caption strong{display:block; font-family:var(--font-display, 'Fraunces', serif); font-size:1.15rem; font-weight:600; margin-bottom:2px;}
@media (max-width:920px){.home-page .hero-photo-card img{height:380px;}}

/* TRUST STRIP - infinite marquee, one row, right-to-left loop */
.home-page .trust-strip{background:var(--ground-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:22px; overflow:hidden;}
.home-page .trust-track{display:flex; width:max-content; animation:trustMarquee 26s linear infinite;}
.home-page .trust-strip:hover .trust-track{animation-play-state:paused;}
.home-page .trust-row{display:flex; flex-wrap:nowrap; align-items:center; gap:48px; padding-right:48px;}
.home-page .trust-item{display:flex; align-items:center; gap:10px; font-size:0.989rem; color:var(--ink-soft); font-weight:500; white-space:nowrap;}
.home-page .trust-item svg{flex:none; color:var(--teal);}
.home-page .trust-item b{color:var(--ink);}
@keyframes trustMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .home-page .trust-track{animation:none;}
}

/* SERVICES grid - shared component (academia_service_cards() in the
   plugin), see academia-shared.css for its CSS - used on both Home
   (2x2, all 4 services) and London (cols-3 crosssell row). */

/* TEAM - see .team-carousel below (dark "Steno experts" style, picked over an
   earlier plain-grid version) */

/* TEAM CAROUSEL (alt design B, for comparison - "Steno experts carousel" style:
   dark band, large serif heading, arrow-driven horizontal scroller of tall
   portrait cards). Same inset-background rule as .blog-section
   (academia-shared.css): the navy card sits 40px from the real viewport
   edge on desktop instead of bleeding full-width, while the actual content
   (heading, track) stays pinned to its normal ~1120px column via
   .team-carousel-inner so nothing about the layout itself changes size -
   only the backdrop around it grows. Mobile keeps the normal contained
   .wrap. */
.home-page .team-carousel{padding-block:64px;}
/* tighter gap right after the orange language-tests block (64px above + 64px here felt too airy) */
.home-page .lang-tests + .team-carousel{padding-top:8px;}
.home-page .team-carousel .wrap{
  background:var(--ink); color:#EAF3F8; border-radius:28px; padding:56px 40px;
}
.home-page .team-carousel-inner{max-width:1250px; margin-inline:auto;}
@media (min-width:701px){
  .home-page .team-carousel .wrap{
    max-width:none;
    width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .home-page .team-carousel .wrap{padding:40px 22px; border-radius:20px;}
}
.home-page .team-carousel .rule{border:none; border-top:1px solid rgba(234,243,248,.18); margin:0 0 40px;}
.home-page .team-carousel .tc-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px;}
.home-page .team-carousel .eyebrow{color:var(--sky);}
.home-page .team-carousel h2{font-size:clamp(2.07rem,3.7vw,2.76rem); color:#fff; font-weight:600; margin-top:8px;}
.home-page .team-carousel .tc-head p{color:#9FB7C4; margin-top:8px; font-size:1.15rem;}
.home-page .team-carousel .tc-controls{display:flex; gap:10px; align-items:center;}
.home-page .team-carousel .tc-arrow{width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; border:1px solid rgba(234,243,248,.3); background:transparent; color:#EAF3F8; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .2s ease, border-color .2s ease;}
.home-page .team-carousel .tc-arrow:hover{background:rgba(0,174,240,.18); border-color:var(--sky);}
.home-page .team-carousel .tc-cta{background:var(--orange); color:#fff; border-radius:999px; padding:12px 22px; font-weight:600; font-size:1.058rem; white-space:nowrap; transition:background-color .2s ease;}
.home-page .team-carousel .tc-cta:hover{background:var(--orange-deep);}
.home-page .team-carousel .tc-track{display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity; padding-bottom:8px;}
.home-page .team-carousel .tc-track::-webkit-scrollbar{height:6px;}
.home-page .team-carousel .tc-track::-webkit-scrollbar-thumb{background:rgba(234,243,248,.2); border-radius:3px;}
.home-page .team-carousel .tc-card{flex:0 0 240px; scroll-snap-align:start;}
.home-page .team-carousel .tc-photo{
  width:100%; aspect-ratio:3/4; border-radius:2px;
  background-size:cover; background-position:center 18%;
  clip-path:polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.home-page .team-carousel .tc-photo.tc-fallback{display:flex; align-items:center; justify-content:center; font-family:var(--font-display, 'Fraunces', serif); font-size:2.53rem; font-weight:600; color:#fff;}
.home-page .team-carousel h4{color:#fff; font-size:1.17rem; font-weight:600; margin-top:16px; font-family:var(--font-body, 'Work Sans', sans-serif);}
.home-page .team-carousel .tc-card p{color:#9FB7C4; font-size:0.989rem; margin-top:4px; line-height:1.4;}
@media (max-width:700px){
  .home-page .team-carousel .tc-card{flex-basis:200px;}
}

/* ABOUT - excerpt from /o-nama/, real photo left, text right */
.home-page .about-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center;}
@media (max-width:860px){.home-page .about-grid{grid-template-columns:1fr; gap:32px;}}
.home-page .about-photo{margin:0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);}
.home-page .about-photo img{width:100%; height:100%; object-fit:cover; display:block; max-height:560px;}
.home-page .about-heading{
  font-size:clamp(1.72rem,3vw,2.3rem); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; position:relative; padding-bottom:18px; margin-bottom:22px;
}
.home-page .about-heading::after{content:""; position:absolute; left:0; bottom:0; width:64px; height:4px; background:var(--teal); border-radius:2px;}
.home-page .about-copy p{color:var(--ink-soft); margin:0 0 14px; line-height:1.65;}
.home-page .about-copy strong{color:var(--ink);}
.home-page .about-copy .btn{margin-top:8px;}

/* TESTIMONIALS - decorated: accent top bar, big quote glyph, avatar initials */
.home-page .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:920px){.home-page .testi-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.home-page .testi-grid{grid-template-columns:1fr;}}
.home-page .testi-card{position:relative; background:var(--ground-raised); border:1px solid var(--line); border-top:4px solid var(--accent, var(--teal)); border-radius:var(--radius-card, 16px); padding:28px 22px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; overflow:hidden;}
.home-page .testi-card .quote-mark{position:absolute; top:-6px; right:14px; font-family:var(--font-display, 'Fraunces', serif); font-size:6.32rem; line-height:1; color:var(--accent, var(--teal)); opacity:.13; font-weight:700; pointer-events:none;}
.home-page .testi-card.featured{grid-column:span 2; background:var(--teal-deep); color:#EAF6FF; border:none; border-top:4px solid var(--sky);}
@media (max-width:920px){.home-page .testi-card.featured{grid-column:span 2;}}
@media (max-width:640px){.home-page .testi-card.featured{grid-column:span 1;}}
.home-page .testi-card.featured .quote-mark{color:#fff; opacity:.14;}
.home-page .testi-card .quote{font-family:var(--font-display, 'Fraunces', serif); font-size:1.17rem; line-height:1.5; position:relative;}
.home-page .testi-card.featured .quote{font-size:1.36rem;}
.home-page .testi-card .who-row{display:flex; align-items:center; gap:10px;}
.home-page .testi-card .who-avatar{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display, 'Fraunces', serif); font-weight:600; font-size:1.03rem; flex:none; background:var(--accent, var(--teal));}
.home-page .testi-card.featured .who-avatar{background:#fff; color:var(--teal-deep);}
.home-page .testi-card .who{font-size:0.966rem; color:var(--ink-soft); font-weight:600;}
.home-page .testi-card.featured .who{color:#BFE7FF;}
.home-page .testi-card .who span{display:block; font-weight:400; opacity:.85; margin-top:2px;}

/* BLOG - see academia-shared.css .blog-section (shared across every
   custom page, not page-specific). */

/* Photo heroes on EVERY Home-based page (Sertifikati, Časovi, IELTS, O nama ...): only the Home landing got readable text over the
   photo, the others kept the grey-blue #9FB7C4 secondary text, which is hard to read on a photo (worst on phones). Same treatment. */
.home-page .hero-photo .eyebrow,
.home-page .hero-photo h1,
.home-page .hero-photo .lede,
.home-page .hero-photo .hero-trust{text-shadow:0 2px 14px rgba(5,10,16,.8), 0 1px 3px rgba(5,10,16,.95);}
.home-page .hero-photo .eyebrow{color:#fff; font-weight:700;}
.home-page .hero-photo .lede,
.home-page .hero-photo .hero-trust{color:rgba(255,255,255,.94);}
.home-page .hero-photo .hero-actions .btn-ghost{background:rgba(7,15,23,.35);}