/* ============================================================
   BLOG POST OPENING — post.css
   Loaded after guide.css, by /blogs/<post>/ pages and the
   /guides/best-ai-accounting-software-india/ guide.

   Mercury-style split opening: on desktop the first screen is a
   cream panel on the left (eyebrow, headline, dek, byline, centred)
   and a full-height photo on the right; reading starts below.
   On phones the text comes first and the photo sits under it.
   Only the hero is touched here; the article body keeps guide.css.

   Type rules on h1-h4/p are prefixed .zoffer per the specificity
   contract in docs/HANDOFF.md.
============================================================ */

.post-hero.guide-hero {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cream-dark);
  text-align: center;
}

.post-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem var(--space-4) 2.5rem;
}
/* brand orange drops below the site's contrast floor on the darker panel;
   the hover shade of the same orange keeps the eyebrow legible */
.zoffer .post-hero .eyebrow { color: var(--orange-hover); }
.zoffer .post-hero h1 { margin-bottom: 1rem; }
.zoffer .post-hero .sub { max-width: 34rem; margin-bottom: 1.25rem; }

.post-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* the article's own top padding is trimmed by guide.css for the old
   text-only hero; give the body some air below the photo */
.post-hero + .section { padding-top: 3.5rem; }

@media (min-width: 900px) {
  .post-hero.guide-hero {
    grid-template-columns: 1fr 1fr;
    /* one screen below the 73px sticky nav, within sensible bounds */
    min-height: clamp(560px, calc(100vh - 73px), 980px);
    min-height: clamp(560px, calc(100svh - 73px), 980px);
  }
  .post-hero-text { padding: 4rem clamp(2rem, 5vw, 5.5rem); }
  .zoffer .post-hero h1 { font-size: clamp(2.4rem, 3.9vw, 4rem); line-height: 1.08; }
  .post-hero-media { position: relative; }
  .post-hero-media img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}