/* NaRa Academy v0.25.4.1 — Hero Responsive & Sales Polish
   Additive layer over homepage-v0254.css. Keeps all admin-managed content intact. */

/* Desktop: real two-column hero. The old 1100px breakpoint stacked too early on large/zoomed desktops. */
@media (min-width: 881px) {
  .n254-hero.has-media {
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr) !important;
    min-height:620px !important;
  }
  .n254-hero.has-media .n254-hero-copy { order:1; }
  .n254-hero.has-media .n254-hero-media {
    order:2 !important;
    height:auto !important;
    min-height:100% !important;
  }
  .n254-hero.has-media .n254-hero-media img {
    width:100%;height:100%;object-fit:cover;object-position:center;
  }
}

/* No Hero image: never show a giant logo placeholder. Use a premium text-first composition. */
.n254-hero.no-media {
  grid-template-columns:1fr !important;
  min-height:540px;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 87% 18%,color-mix(in srgb,var(--nara-gold) 17%,transparent),transparent 28%),
    radial-gradient(circle at 78% 78%,color-mix(in srgb,var(--nara-gold) 9%,transparent),transparent 30%),
    linear-gradient(135deg,#fff 0%,#fffdf8 58%,#fbf2df 100%);
}
.n254-hero.no-media:after {
  content:"NR";position:absolute;right:6%;top:50%;transform:translateY(-50%);
  z-index:-1;font:700 clamp(120px,15vw,260px) Georgia,serif;
  color:color-mix(in srgb,var(--nara-gold) 9%,transparent);letter-spacing:-.08em;pointer-events:none;
}
.n254-hero.no-media .n254-hero-copy { max-width:980px;padding-right:clamp(42px,15vw,240px); }
.n254-hero.no-media .n254-hero h1 { max-width:12ch; }

/* Branded fallbacks when course artwork is not uploaded yet. */
.n254-branded-placeholder {
  width:100%;height:100%;min-height:100%;display:grid;place-content:center;justify-items:center;gap:10px;
  background:linear-gradient(145deg,#f8edd3,#d8aa48);color:#3a271f;text-align:center;padding:24px;
}
.n254-branded-placeholder img { width:72px!important;height:72px!important;object-fit:cover!important;border-radius:15px;box-shadow:0 12px 30px rgba(71,45,27,.12); }
.n254-branded-placeholder span { font:700 22px Georgia,serif; }
.n254-branded-placeholder span b { color:#7d5417; }
.n254-branded-placeholder.small img { width:58px!important;height:58px!important; }
.n254-branded-placeholder.small span { font-size:18px; }

/* Desktop tariff summary should not obscure cards. Mobile keeps sticky purchase CTA. */
.n254-plan-summary { position:relative !important;bottom:auto !important; }

/* Tablet/mobile: put sales copy first, media after it. No overlapping headline/photo. */
@media (max-width: 880px) {
  .n254-hero.has-media { display:flex!important;flex-direction:column;min-height:0!important; }
  .n254-hero.has-media .n254-hero-copy { order:1!important; }
  .n254-hero.has-media .n254-hero-media {
    order:2!important;height:auto!important;min-height:0!important;aspect-ratio:16/9;overflow:hidden;
    border-top:1px solid #eadfd1;
  }
  .n254-hero.has-media .n254-hero-media img { width:100%;height:100%;object-fit:cover;object-position:center; }
  .n254-hero.no-media .n254-hero-copy { padding-right:clamp(24px,7vw,56px); }
  .n254-hero.no-media:after { right:2%;font-size:clamp(100px,23vw,170px); }
}

@media (max-width: 700px) {
  main { width:calc(100% - 20px)!important;margin-top:14px!important; }
  .n254-header { padding:11px 12px!important; }
  .n254-brand { font-size:clamp(22px,6.2vw,27px)!important;gap:9px!important; }
  .n254-brand img { width:42px!important;height:42px!important; }
  .n254-menu-btn { width:46px!important;height:46px!important; }

  .n254-hero { border-radius:24px!important; }
  .n254-hero-copy { padding:24px 18px 26px!important; }
  .n254-hero.has-media .n254-hero-media { aspect-ratio:16/10; }
  .n254-hero h1 {
    font-size:clamp(39px,10.8vw,52px)!important;line-height:.98!important;letter-spacing:-.035em!important;
    margin:18px 0 15px!important;max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;
    text-wrap:balance;
  }
  .n254-lead { font-size:16px!important;line-height:1.48!important; }
  .n254-sublead { font-size:13px!important;line-height:1.4!important; }
  .n254-pill { font-size:11px!important;padding:8px 11px!important; }
  .n254-hero-stats { grid-template-columns:1fr!important;gap:7px!important;margin-top:20px!important; }
  .n254-hero-stats span { min-width:0;overflow-wrap:anywhere; }
  .n254-hero-actions { margin-top:22px!important;grid-template-columns:1fr 1fr!important; }
  .n254-hero-actions a { min-width:0!important;white-space:normal!important;text-align:center!important; }

  .n254-hero.no-media { min-height:0!important; }
  .n254-hero.no-media:after { opacity:.72;right:-7%;top:37%;font-size:clamp(92px,31vw,145px); }
  .n254-hero.no-media .n254-hero-copy { padding-right:18px!important; }

  .n254-featured { margin-top:14px!important; }
  .n254-featured-media { height:190px!important; }
  .n254-featured-copy h2 { font-size:clamp(31px,9vw,38px)!important;line-height:1.03!important; }
  .n254-featured-copy p { font-size:14px; }
  .n254-featured-buy { grid-template-columns:1fr!important; }
  .n254-featured-buy small,.n254-featured-buy strong { grid-column:auto!important; }
  .n254-featured-buy a { width:100%; }

  .n254-section-head h2 { font-size:clamp(35px,10vw,44px)!important;line-height:1.02!important; }
  .n254-plan h3 { overflow-wrap:anywhere; }
  .n254-plan-summary { position:sticky!important;bottom:max(8px,env(safe-area-inset-bottom))!important; }
  .n254-summary-copy b,.n254-summary-copy span { overflow-wrap:anywhere;white-space:normal!important; }

  .n254-course-card,.n254-payment,.n254-final,.n254-legal,.n254-trust,.n254-plan,.n254-featured { max-width:100%;overflow:hidden; }
  .n254-course-card h3,.n254-final h2,.n254-payment h2,.n254-legal h2 { overflow-wrap:anywhere; }
}

@media (max-width: 390px) {
  .n254-brand span { font-size:21px!important; }
  .n254-hero h1 { font-size:38px!important; }
  .n254-hero-actions { grid-template-columns:1fr!important; }
  .n254-plan-summary { grid-template-columns:42px minmax(0,1fr)!important; }
  .n254-summary-icon { width:42px!important;height:42px!important; }
}