/* Full-bleed hero & USP styles (child theme)
  - Designed to match front-page hero and single post hero
  - Responsive, mobile-first, accessible
*/
:root{--page-gutter:20px;--content-max:1320px;--hero-vertical:48px}

/* Make the hero section full-bleed */
.hero--full-bleed{
  position:relative;
  /* center relative to viewport using transform; avoids parent-width
     calculations and works regardless of scrollbar width */
  left:50%;
  transform:translateX(-50%);
  width:100vw !important;
  max-width:none; /* let 100vw be the sole limiter */
  padding:32px 0 8px;
  background:linear-gradient(180deg,#081427 0%, #071026 60%);
  color:#eaf0ff;
  margin:0; /* clear any earlier margins */
}
/* previous overrides no longer needed; keep them safe but inert */
.hero--full-bleed {right:auto;margin-right:0}
.hero--full-bleed .wrap.hero-grid{max-width:var(--content-max);display:grid;grid-template-columns:minmax(620px,1fr) minmax(420px,560px);gap:36px;align-items:center;padding:0 calc(var(--page-gutter) * 2);margin:0 auto}

/* Offset control: move the hero slightly right on larger viewports so left card
   is not visually cramped. Adjust values per breakpoint for better balance. */
@media (min-width:1000px){
  .hero--full-bleed .wrap.hero-grid{padding-left:calc(var(--page-gutter) * 2 + 48px)}
  /* bump vertical padding beneath header on desktop */
  .hero--full-bleed { padding-top: calc(var(--hero-vertical) + 32px); }
}
@media (min-width:1300px){
  .hero--full-bleed .wrap.hero-grid{padding-left:calc(var(--page-gutter) * 2 + 88px)}
}
@media (min-width:1600px){
  .hero--full-bleed .wrap.hero-grid{padding-left:calc(var(--page-gutter) * 2 + 140px)}
}

/* Left content card */
.hero-left .hero-card-inner{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:18px;padding:42px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 20px 50px rgba(3,10,20,0.6);border:1px solid rgba(255,255,255,0.03)}
.hero-left .template-badges{margin-bottom:16px}
.template-badge{display:inline-block;background:transparent;border:1px solid rgba(255,255,255,0.05);padding:6px 10px;border-radius:999px;margin-right:8px;color:#bfe9ff;font-weight:700;font-size:.9rem}

/* Right image card */
.hero-right .hero-image-wrap{border-radius:18px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.005));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 20px 50px rgba(3,10,20,0.6);border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center}
.hero-right img.wp-image{width:100%;height:auto;border-radius:12px;display:block;object-fit:cover}
.hero-image-fallback{width:100%;height:360px;border-radius:12px;background:linear-gradient(180deg,#061227,#021021)}

/* Spacer preserves document flow on tall hero */
.hero-spacer{display:none;height:0;min-height:0}

/* Responsive: stack on smaller screens */
@media (max-width: 1000px){
  .hero--full-bleed .wrap.hero-grid{grid-template-columns:1fr;gap:18px;padding:0 18px}
  .hero-left .hero-card-inner{padding:28px;border-radius:14px}
  .hero-right .hero-image-wrap{padding:16px}
  .hero-title{font-size:2rem}
  .hero-excerpt{font-size:1rem}
  .hero-spacer{display:none}
}

/* Small screens: tighten spacing */
@media (max-width: 640px){
  .hero-title{font-size:1.6rem}
  .cta-primary{padding:12px 20px}
}

/* Modern sidebar styles */
.col-aside{display:block}
.col-aside .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 12px 30px rgba(3,8,12,0.5);margin-bottom:18px}
.col-aside .card img{width:100%;height:auto;border-radius:10px;display:block;margin-bottom:12px}
.col-aside .card .price{font-weight:800;color:#b8f0ff;font-size:1.1rem;margin-bottom:8px}
.col-aside .card .includes{color:rgba(234,240,255,0.85);font-size:.95rem}
.col-aside .card .meta-actions{display:flex;gap:8px;margin-top:12px}
.col-aside .card .meta-actions .btn{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.02);color:#eaf6ff;text-decoration:none}
.col-aside .related-terms{background:transparent;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.col-aside .related-terms h4{margin:0 0 8px;color:#cbefff}
.col-aside .latest-posts{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.col-aside .latest-posts h4{margin:0 0 12px;color:#cfefff}
.latest-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.latest-list li{display:flex;gap:12px;align-items:center}
.latest-list img{width:64px;height:48px;object-fit:cover;border-radius:8px;flex:0 0 64px}
.latest-list a{color:#e6f7ff;text-decoration:none;font-weight:700}
.latest-list a:hover{text-decoration:underline}

.latest-meta{display:flex;flex-direction:column}
.latest-meta strong{display:block;color:#e6f7ff;font-weight:800;margin-bottom:6px}
.latest-excerpt{font-size:.95rem;color:rgba(234,240,255,0.78);margin:0}
.latest-excerpt{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Placeholder thumb when no image available */
.latest-thumb-placeholder{width:64px;height:48px;border-radius:8px;background:linear-gradient(135deg,#0e2940,#06202b);display:flex;align-items:center;justify-content:center;flex:0 0 64px}
.latest-thumb-placeholder .thumb-initial{color:#bfe9ff;font-weight:800;font-size:1rem}

/* Sticky sidebar on wide viewports */
@media (min-width:1000px){
  .two-col{align-items:start}
  .col-aside{position:sticky;top:96px}
}

/* Article layout: main content left, sidebar right */
.two-col{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;max-width:var(--content-max);padding:0 calc(var(--page-gutter) * 2);margin:0 auto}
.two-col .col-main{order:1}
.two-col .col-aside{order:2}

@media (max-width: 1000px){
  .two-col{grid-template-columns:1fr;gap:24px;padding:0 18px}
  .two-col .col-main{order:1}
  .two-col .col-aside{order:2}
}
/* Full-bleed hero & USP styles (child theme)
   - Designed to match front-page hero and single post hero
   - Responsive, mobile-first, accessible
*/
:root{--page-gutter:20px;--content-max:1200px;--hero-vertical:48px}

/* Make the hero section full-bleed */
.hero--full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:calc(var(--hero-vertical)) 0;background:linear-gradient(180deg,rgba(11,18,32,.98),#080c18);color:var(--text, #eaf0ff)}
.hero--full-bleed .wrap.hero-grid{max-width:var(--content-max);display:grid;grid-template-columns:minmax(560px,1fr) minmax(320px,560px);gap:36px;align-items:center;padding:0 calc(var(--page-gutter) * 2);margin:0 auto}

/* Hero left content */
.hero--full-bleed .hero-card{background:transparent;border:none;padding:0}
.hero--full-bleed .hero-kicker{font-weight:700;color:#62d3ff;margin-bottom:8px;font-size:.95rem}
.hero--full-bleed .hero-title{font-size:2.25rem;margin:0 0 12px;color:#ffffff;font-weight:900;line-height:1.05;max-width:none}
.hero--full-bleed .hero-excerpt{color:rgba(234,240,255,.9);margin-bottom:18px;line-height:1.6;max-width:110ch}
.hero--full-bleed .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero--full-bleed .cta-btn{background:linear-gradient(90deg,#62d3ff,#00bfff);color:#021424;padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none}

/* make left column breathe more for title/description */
.hero--full-bleed .wrap.hero-grid > .hero-card:first-child{padding-left:64px}

/* Hero image column */
.hero--full-bleed .hero-card + .hero-card{display:flex;justify-content:center}
.hero--full-bleed img.wp-image{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);display:block}

/* Spacer used to reserve hero height when image is anchored to viewport */
.hero-spacer{display:none}

@media (min-width: 1200px){
  /* anchor the hero image to the right edge of the viewport (keeps it visually close to edge)
     while the spacer preserves layout below the hero */
  .hero--full-bleed .wrap.hero-grid{position:relative}
  .hero--full-bleed .hero-card:last-child{position:absolute;right:calc((100vw - var(--content-max))/2 + 36px);top:50%;transform:translateY(-50%);width:480px;max-width:44%;display:block}
  .hero-spacer{display:block;height:clamp(520px,58vh,880px)}
}

/* USP (section under hero) full-bleed */
.usp--full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:28px 0;background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.005));color:var(--text)}
.usp--full-bleed .wrap{max-width:var(--content-max);padding:0 var(--page-gutter);margin:0 auto}
.usp--full-bleed .card{background:transparent;padding:10px;border-radius:10px}

/* Responsive tweaks */
@media (max-width: 900px){
  .hero--full-bleed .wrap.hero-grid{grid-template-columns:1fr;gap:14px;padding:0 12px}
  .hero--full-bleed .hero-card + .hero-card{order:-1}
  /* Reduce heading size slightly on narrow screens to avoid heavy wrapping */
  .hero--full-bleed .hero-title{font-size:1.75rem}
  /* Allow description to use full width and reduce left padding */
  .hero--full-bleed .wrap.hero-grid > .hero-card:first-child{padding-left:12px}
  .hero--full-bleed .hero-excerpt{max-width:none}
  .hero--full-bleed{padding:18px 0}
}

/* Mid-range breakpoint: give left column more room before the image anchors */
@media (min-width:1000px) and (max-width:1199px){
  .hero--full-bleed .wrap.hero-grid{grid-template-columns:minmax(620px,1fr) minmax(360px,560px)}
  .hero--full-bleed .hero-title{font-size:2rem}
}

/* Small helpers */
.hero--full-bleed .lead, .hero--full-bleed .hero-excerpt{font-size:1rem}

/* spacer element to reserve space when hero image is anchored */
.hero-spacer{display:none}
@media (min-width:1100px){
  .hero-spacer{display:block;height:clamp(520px,58vh,880px)}
}

/* Defensive override: if absolute positioning causes overlap, keep image in-flow
   and add padding to the hero so following content is pushed down. */
@media (min-width:1100px){
  .hero--full-bleed .wrap.hero-grid > .hero-card:last-child{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    transform:translateX(min(40vw,360px)) !important;
    width:auto !important;
    margin:0 !important;
    padding-right:0 !important;
    z-index:2 !important;
    justify-self:end !important;
  }
  .template-hero{min-height:unset !important; padding-bottom:0.5rem !important}
  .hero-spacer{display:none !important}
}