/* =========================================================
   EDIUSFA — 11-HOMEPAGE
   Page-specific styles for the homepage (front-page.php)
   -----------------------------------------------------------------
   Source of truth: ediusfa-homepage-final.html
   - Second <style> block, lines 815–962 and 976–1045
   -----------------------------------------------------------------
   NOTE: .pdp-container, .pdp-header, .header-search-toggle,
   .comp-mobile-searchbar, body padding-bottom, .comp-footer
   overrides, and .mobile-sticky-nav have been moved to their
   co-located files (03-components, 04-header, 05-footer).
   -----------------------------------------------------------------

   @package    EdiusFA
   @subpackage assets/css
   @since      0.1.0
   @version    0.1.0
   ========================================================= */

/* ---------- Section base ---------- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap;}
.section-head h2{font-size:22px; font-weight:800;}
.section-head p{color:var(--ink-faint); font-size:13px; margin-top:4px;}
.home-section{padding:52px 0;}
.home-section.alt{background:var(--bg-sunken); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- HERO (search-first, compact) ---------- */
.hero{padding:40px 0 44px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 60% at 8% 0%, rgba(47,217,236,.08), transparent 70%),
             radial-gradient(35% 45% at 95% 15%, rgba(237,168,62,.08), transparent 70%);
}
.hero-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }

.hero-copy .track-tag{margin-bottom:16px;}
.hero-copy h1{font-size:clamp(24px,3vw,32px); font-weight:800; line-height:1.45; margin-bottom:12px; max-width:520px;}
.hero-copy h1 em{font-style:normal; color:var(--cyan);}
.hero-copy > p{color:var(--ink-dim); font-size:14.5px; max-width:460px; margin-bottom:22px;}

.hero-search{
  display:flex; align-items:center; gap:10px; background:var(--bg-elevated); border:1.5px solid var(--line-strong);
  border-radius:var(--radius-full); padding:8px 8px 8px 20px; max-width:560px; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hero-search:focus-within{border-color:var(--cyan); box-shadow:var(--glow-cyan);}
.hero-search svg{color:var(--ink-faint); flex-shrink:0;}
.hero-search input{background:none; border:none; outline:none; color:var(--ink); font-size:15px; width:100%;}
.hero-search input::placeholder{color:var(--ink-faint);}
.hero-search .btn{flex-shrink:0;}

.hero-suggest{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.hero-suggest span{font-size:11.5px; color:var(--ink-faint); align-self:center;}
.hero-suggest a{
  font-size:12px; color:var(--ink-dim); background:var(--bg-elevated); border:1px solid var(--line);
  padding:6px 12px; border-radius:99px; transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hero-suggest a:hover{border-color:var(--cyan); color:var(--cyan);}

/* Editing-timeline hero visual — signature element (ported from the reference hero) */
.hero-visual{position:relative; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--bg-elevated); padding:18px; overflow:hidden;}
@media (max-width:900px){ .hero-visual{display:none;} }
.hero-visual-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint);}
.hero-visual-head .rec{display:flex; align-items:center; gap:6px; color:var(--danger);}
.hero-visual-head .rec i{width:5px; height:5px; border-radius:50%; background:var(--danger); display:inline-block; animation:dsPulse 1.6s infinite;}
.hero-visual-head b{color:var(--ink); font-weight:700;}

.ht-timeline{position:relative; padding-inline-start:40px;}
.ht-track{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.ht-track-label{
  position:absolute; inset-inline-start:0; width:32px; text-align:center;
  font-family:var(--font-mono); font-size:10px; color:var(--ink-faint);
  border:1px solid var(--line-strong); border-radius:5px; padding:3px 0;
}
.ht-track-lane{flex:1; height:34px; background:var(--bg-sunken); border-radius:6px; position:relative; display:flex; align-items:center; overflow:hidden;}
.ht-clip{
  height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:600; color:#fff; padding:0 7px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; opacity:.95;
}
.ht-clip--danger{background:linear-gradient(90deg, var(--danger), var(--danger-dim));}
.ht-clip--amber{background:linear-gradient(90deg, var(--amber), var(--amber-dim)); color:var(--ink-on-accent);}
.ht-clip--cyan{background:linear-gradient(90deg, var(--cyan-400), var(--cyan-700)); color:var(--ink-on-accent);}
.ht-clip--cyan-dark{background:linear-gradient(90deg, var(--cyan-900), var(--cyan-700));}
.ht-waveform{gap:2px; padding:0 8px;}
.ht-waveform i{display:inline-block; width:3px; background:var(--cyan); border-radius:2px; opacity:.55;}
.ht-playhead{
  position:absolute; top:0; bottom:0; width:2px; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan); z-index:5; inset-inline-start:40px;
}
.ht-timecode{
  position:absolute; top:-23px; inset-inline-end:-24px; transform:translateX(50%);
  background:var(--cyan); color:var(--ink-on-accent); font-family:var(--font-mono); font-weight:700;
  font-size:10.5px; padding:2px 7px; border-radius:4px; white-space:nowrap;
}
.hero-visual-foot{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}

/* ---------- Quick categories ---------- */
.quick-cats-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
@media (max-width:900px){ .quick-cats-grid{display:flex; overflow-x:auto; gap:12px; padding-bottom:6px;} .quick-cats-grid .cat-card{flex:0 0 108px;} }

/* ---------- Trust / stats ---------- */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:760px){ .stats-row{grid-template-columns:repeat(2,1fr);} }
.stat-card{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; text-align:center;}
.stat-card .num{font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--cyan); display:block; margin-bottom:6px;}
.stat-card .lbl{font-size:12px; color:var(--ink-faint);}

/* ---------- Product rows (grid desktop -> scroll mobile) ---------- */
.prod-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}

/* ---------- Product card stretched-link (fix: cards are now clickable) ---------- */
.prod-card-cover{position:absolute; inset:0; z-index:1; border-radius:inherit;}
.prod-card .add-btn{position:relative; z-index:2;}
@media (max-width:1100px){ .prod-row{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){
  .prod-row{display:flex; grid-template-columns:none; overflow-x:auto; gap:12px; padding-bottom:6px; scroll-snap-type:x mandatory;}
  .prod-row .prod-card{flex:0 0 168px; scroll-snap-align:start;}
}

/* ---------- Main categories (software tracks) ---------- */
.track-cards-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .track-cards-row{grid-template-columns:1fr;} }

/* ---------- Free resources panel ---------- */
.free-panel{border:1.5px dashed var(--success); border-radius:var(--radius-lg); padding:26px; background:rgba(51,209,157,.05);}
.free-panel-head{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.free-panel-head svg{color:var(--success);}
.free-panel-head h2{font-size:19px; font-weight:800;}
.free-panel-head span{font-size:12px; color:var(--ink-faint);}

/* ---------- Seasonal collections ---------- */
.season-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px;}
@media (max-width:760px){ .season-grid{grid-template-columns:1fr;} }
.season-card{position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:26px; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line);}
.season-card.s1{background:linear-gradient(135deg, var(--cyan-900), #1a1206);}
.season-card.s2{background:linear-gradient(135deg, var(--amber-900), #06232a);}
.season-card .track-tag{align-self:flex-start; margin-bottom:auto;}
.season-card h3{font-size:19px; margin-bottom:6px;}
.season-card p{font-size:12.5px; color:var(--ink-dim); margin-bottom:14px; max-width:320px;}

/* ---------- Why EdiusFA (feature-card reused) ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .why-grid{grid-template-columns:1fr;} }

/* ---------- Social proof (legacy grids retained for forward-compat) ---------- */
.proof-grid{display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center; margin-bottom:28px;}
@media (max-width:760px){ .proof-grid{grid-template-columns:1fr;} }
.review-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:900px){ .review-row{grid-template-columns:1fr; }}

/* ---------- Educational content ---------- */
.article-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:900px){ .article-row{grid-template-columns:1fr;} }

/* ---------- Community / Telegram CTA ---------- */
.cta-banner{
  border-radius:var(--radius-lg); border:1px solid var(--line-strong); padding:36px;
  background:linear-gradient(120deg, rgba(47,217,236,.10), rgba(237,168,62,.08));
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-banner-left{display:flex; align-items:center; gap:16px;}
.cta-banner-icon{width:52px; height:52px; border-radius:14px; background:var(--bg-elevated); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;}
.cta-banner h3{font-size:18px; font-weight:800; margin-bottom:4px;}
.cta-banner p{font-size:13px; color:var(--ink-dim);}
.cta-banner-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* =========================================================
   SOCIAL PROOF — Testimonial Spotlight (redesign)
   A stat strip + a large rotating spotlight quote with a
   clickable selector list — replaces the old dot/arrow carousel.
   ========================================================= */
.proof-stats-strip{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:18px 24px; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:var(--radius-lg); margin-bottom:22px;
}
.psx-score{display:flex; align-items:center; gap:10px;}
.psx-score b{font-size:26px; color:var(--ink); font-weight:700;}
.psx-score .stars{font-size:14px;}
.psx-sep{width:1px; height:26px; background:var(--line-strong); flex-shrink:0;}
.psx-total{font-size:12.5px; color:var(--ink-faint);}
.psx-total b{color:var(--ink); font-family:var(--font-mono); font-weight:700;}
.psx-bars{display:flex; gap:16px; margin-inline-start:auto;}
@media (max-width:700px){ .psx-bars{display:none;} .psx-total{margin-inline-end:auto;} }
.psx-bar-row{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-faint);}
.psx-bar-track{width:56px; height:5px; border-radius:99px; background:var(--bg-elevated-2); overflow:hidden;}
.psx-bar-fill{height:100%; background:var(--amber); border-radius:99px;}

.spotlight-layout{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:stretch;}
@media (max-width:800px){ .spotlight-layout{grid-template-columns:1fr;} }

.spotlight-card{
  position:relative; background:var(--bg-elevated); border:1px solid var(--line-strong);
  border-radius:var(--radius-lg); padding:34px; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; min-height:260px;
}
.spotlight-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 100% 0%, rgba(47,217,236,.09), transparent 70%);
}
.spotlight-quote-mark{
  position:absolute; top:10px; inset-inline-end:26px; font-family:var(--font-mono);
  font-size:68px; color:var(--line-strong); line-height:1; user-select:none;
}
.spotlight-card .track-tag{position:relative; align-self:flex-start; margin-bottom:18px;}
.spotlight-card p{
  position:relative; font-size:18px; color:var(--ink); line-height:1.9; margin-bottom:22px;
  max-width:520px; min-height:96px;
}
.spotlight-card p.is-fading{opacity:0; transform:translateY(4px);}
.spotlight-card p{transition:opacity .2s var(--ease), transform .2s var(--ease);}
.spotlight-foot{position:relative; display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.spotlight-foot .review-avatar{width:44px; height:44px; font-size:16px; flex-shrink:0;}
.spotlight-meta b{font-size:14px; display:block;}
.spotlight-meta span{font-size:12px; color:var(--ink-faint);}
.spotlight-card .testi-verified{position:relative;}
.testi-verified{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--success);}

.testi-list{display:flex; flex-direction:column; gap:8px;}
.testi-list-item{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--bg-elevated); cursor:pointer; width:100%; text-align:start;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.testi-list-item:hover{border-color:var(--line-cyan);}
.testi-list-item.is-active{border-color:var(--cyan); background:rgba(47,217,236,.07);}
.testi-list-item .review-avatar{width:32px; height:32px; font-size:12.5px; flex-shrink:0;}
.testi-list-item-body{flex:1; min-width:0;}
.testi-list-item-body b{font-size:12.5px; display:block; margin-bottom:2px; color:var(--ink);}
.testi-list-item-body span{
  font-size:11.5px; color:var(--ink-faint); display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.testi-list-item .stars{font-size:10px; flex-shrink:0;}


/* v1.1.0 — homepage icon motion */
.feature-card .ic, .stat-card .ic, .cat-card .emoji, .why-grid .ic {
  animation: efHomeIcon 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes efHomeIcon {
  0%,100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.07) rotate(-2deg); }
}
.hero-copy h1 {
  letter-spacing: -0.01em;
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .feature-card .ic, .stat-card .ic, .cat-card .emoji { animation: none !important; }
}