/*
  Hero media for the Assam appeal band.

  One photograph, sized to the container the band already used (4:3), so the
  image is shown whole — see the note on cropping below.
*/
.hero-media {
  position: relative;
  display: block;
  min-width: 0;
}

.hero-media__photo {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 22px);
  background: #f3e7e6;
  box-shadow: 0 18px 44px rgba(120, 50, 64, .14), 0 2px 6px rgba(120, 50, 64, .07);
}

/*
  The source is 1200x900 and the band's media box was already 4:3, so `cover`
  crops nothing at all — the volunteer at the left edge, the family in the boat
  and the two inset panels on the right are all fully in frame at every width.
  object-position is centred deliberately: shifting it would start cutting
  people off the side that gets moved out of view.
*/
.hero-media__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/*
  A soft fade into the card, confined to the last few percent of the frame.
  The image's own badge row sits at roughly 89-94% of its height, so the fade
  begins below it and never dims "Relief in progress", "Upper Assam" or
  "Community support".
*/
.hero-media__photo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 12%;
  background: linear-gradient(to bottom, rgba(255, 249, 246, 0) 0%, rgba(255, 249, 246, .55) 100%);
  pointer-events: none;
}

/*
  The media wrapper was a card in its own right — 1px border, white background,
  its own radius — wrapped around .hero-media__photo, which is also a card with
  a radius and a shadow. That double frame cost 2px of image width and read as a
  border inside a border. The photo is now the only frame.
*/
.assam-band__media:has(.hero-media) {
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}

/*
  MOBILE ORDER — media leads, copy follows.

  This reverses the rule in styles.css at the same breakpoint, which reads
  "Copy leads, image follows: badge, heading, line, progress, CTAs, then media"
  and sets order: 1. Overridden here rather than edited there, so the original
  intent stays on the record and this file owns the change.
*/
@media (max-width: 860px) {
  .assam-band__media { order: -1; margin: 0; }
  .assam-band__content { order: 0; }
}

/*
  Image first, and wider — PHONES ONLY.

  Deliberately capped at 760px rather than the 860px stack breakpoint: 768px and
  above is tablet, which the brief asked to leave alone, and it renders exactly
  as it did before this change.

  Two things were shrinking the phone image: the band's 20px side padding, and a
  margin-bottom that stacked on top of the grid's own row gap. The padding is
  trimmed rather than removed — the copy still needs its gutter — and the media
  is bled back out over what remains, so the photo runs closer to the card edge
  than the text does.
*/
@media (max-width: 760px) {
  #assam-relief.assam-band { padding: 22px 14px 24px; }
  .assam-band__media { margin: 0 -6px; }   /* bleed over the trimmed padding only */
  .assam-band__inner { gap: 18px; }
}

/*
  MOBILE HEADLINE.

  Was clamp(42px, 12vw, 58px) — 45px at 375px and 52px at 430px, which took most
  of the first screen and pushed the tracker and CTAs below the fold. Reduced
  across the whole mobile range while staying large enough to carry the appeal.
  text-wrap: balance evens the line lengths so "floods." does not end up alone
  on the last line.
*/
@media (max-width: 760px) {
  #assam-relief h2 {
    margin: 12px 0 14px;
    font-size: clamp(2.5rem, 10.5vw, 2.9rem);
    line-height: 1.03;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  #assam-relief .assam-band__line { margin-top: 10px; }
}

/*
  DESKTOP 60/40.

  Scoped to >=1025px on purpose. The base grid is 1.15fr/0.85fr (57.5/42.5), and
  that is what tablet renders today; applying 60/40 below this width would make
  the tablet image narrower, which the brief explicitly asked to avoid. Tablet
  therefore keeps the existing proportion untouched.
*/
@media (min-width: 1025px) {
  .assam-band__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}