/* Echoes of the Nile — hero styles (v6)
   One shared stylesheet used by Main.html, Mobile375.html and Mobile360.html.
   Fluid type/spacing via clamp() + container-query units ("cqw"). Three
   distinct image treatments by container width band — see the bottom of
   this file:
     > 860px   desktop row layout, 45/55 split, image at natural ratio
     431–860px "tablet" band: column layout, image in a 3:2 window
     <= 430px  "phone" band: column layout, image in a fixed-height window
     <= 370px  phone band, tighter still (eyebrow dropped too)
   Logo: a single symbol+wordmark asset (no tagline baked in) is used at
   every width — see the logo rules further down.
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: #F6F2EA;
}

.sans {
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

a {
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #15130D;
  outline-offset: 3px;
}

.viewport-frame {
  container-type: inline-size;
  container-name: hero;
  width: 100%;
  background: #F6F2EA;
}

.hero {
  display: grid;
  /* 45% copy / 55% photography on the desktop row layout. */
  grid-template-columns: 45fr 55fr;
  grid-template-areas: "logo image" "copy image";
  align-content: center;
  align-items: start;
  column-gap: clamp(24px, 2.407px + 2.407cqw, 48px);
  padding: clamp(32px, 16px + 4.444cqw, 80px) clamp(26px, 2.67px + 6.48cqw, 96px);
}

.logo-wrap { grid-area: logo; }
.copy      { grid-area: copy; }
.image-wrap {
  grid-area: image;
  align-self: center;
}

.logo-wrap img {
  display: block;
  width: clamp(128px, 97.33px + 8.52cqw, 220px);
  height: auto;
  margin-bottom: clamp(14px, 3.889cqw, 56px);
}

/* Single logo asset (symbol + "ABUSUA PA" wordmark, gold, no tagline text
   baked in) used at every width — the approved crop that replaced the
   older full lockup, which had an outdated tagline line baked into its
   pixels. Same file, same treatment, desktop and mobile alike. */

.eyebrow {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #15130D;
  opacity: 0.6;
  font-size: clamp(11px, 10.33px + 0.185cqw, 13px);
  margin-bottom: clamp(10px, 4px + 1.667cqw, 20px);
}

h1 {
  margin: 0 0 clamp(8px, 5.33px + 0.741cqw, 16px) 0;
  font-size: clamp(32px, 20px + 3.333cqw, 68px);
  line-height: 1.08;
  font-weight: 400;
  color: #15130D;
}

.subhead {
  font-size: clamp(14px, 12px + 0.556cqw, 20px);
  color: #15130D;
  opacity: 0.72;
  margin-bottom: clamp(10px, 4px + 1.667cqw, 28px);
}

.body-copy {
  font-size: clamp(13px, 12px + 0.278cqw, 16px);
  line-height: 1.55;
  color: #15130D;
  opacity: 0.82;
  max-width: 46ch;
  margin: 0 0 clamp(18px, 9.33px + 2.407cqw, 44px) 0;
}

.body-copy-mobile { display: none; }

.ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 6px + 1.667cqw, 22px);
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  background: #B88B40;
  color: #15130D!important; /* dark text on gold — contrast fix, unchanged since v2 */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(13px, 12.67px + 0.093cqw, 14px);
  padding: clamp(15px, 14px + 0.278cqw, 18px) clamp(24px, 36px, 36px);
  border-radius: 999px;
}

.cta-secondary {
  color: #15130D;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(12px, 11.33px + 0.185cqw, 14px);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.image-wrap img {
  display: block;
  width: 100%;
  height: auto; /* desktop default: natural aspect ratio, no crop box */
}

/* Column layout below the row/column breakpoint: logo, then image, then copy. */
@container hero (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "image" "copy";
    text-align: center;
  }
  .logo-wrap img { margin-left: auto; margin-right: auto; }
  .body-copy { margin-left: auto; margin-right: auto; }
  .subhead { margin-bottom: clamp(10px, 4px + 1.667cqw, 16px); }
  .ctas { align-items: stretch; }
  .cta-primary { width: 100%; padding-left: 0; padding-right: 0; }
  .image-wrap { margin-bottom: clamp(14px, 3.889cqw, 20px); }

  .body-copy-desktop { display: none; }
  .body-copy-mobile { display: block; }
}

/* "Tablet" band, ~431–860px container width: the image stays visually
   substantial — a moderate 3:2 crop window — rather than the small fixed
   phone-style window. This is CSS framing only; the source derivative is
   untouched, just displayed at a taller ratio here than on phones. */
@container hero (min-width: 431px) and (max-width: 860px) {
  .image-wrap img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: 50% 42%;
  }
}

/* "Phone" band, <=430px container width: fold fix. A 3:2 (or natural
   1.28:1) image at full width still ate too much vertical space for both
   CTAs to stay on screen on an actual phone viewport, so this band gets a
   fixed CSS display window instead. Source derivative is unchanged. */
@container hero (max-width: 430px) {
  .image-wrap img {
    height: 260px;
    object-fit: cover;
    object-position: 50% 42%;
  }
}

/* Fold-priority rule: at very narrow widths the eyebrow line drops first,
   and the image window compacts a little further. */
@container hero (max-width: 370px) {
  .eyebrow { display: none; }
  .image-wrap img { height: 202px; }
}