/* Navarra-only layout corrections. Keep the supplied artwork intact. */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
main, section, .section > *, .page-width > * { min-width: 0; }
body .button, body button, .reader-shell button, .header-auth-button, .reader-links .reader-order {
  border-radius: 999px;
}
.centered-cta { max-width: 100%; }
.bank-details dd, .bank-details a { overflow-wrap: anywhere; }
.footer-bottom, .footer-bottom p, .footer-bottom-links { white-space: normal; min-width: 0; }
.footer-bottom-links, .footer-app-buttons { flex-wrap: wrap; }

/* Full-bleed desktop artwork; the supplied wider image fills the left edge too. */
.hero.page-width {
  width: 100%; min-height: clamp(650px, 74vh, 840px); margin: 0;
  padding: 64px max(32px, calc((100% - 1180px) / 2));
  display: flex; align-items: center;
}
.hero-visual { position: absolute; inset: 0; width: 100%; }
.hero-visual picture { display: block; width: 100%; height: 100%; }
.hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 20%; }
.hero-copy {
  width: min(600px, 43vw); max-width: 660px; margin: 0; padding: 0; color: #fff;
}
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.6rem); line-height: 1.04; }

/* Remove only the logo PNG's empty vertical margins, not its artwork. */
.app-promo-copy > a:first-child { display: block; height: 78px; overflow: hidden; margin-bottom: 24px; }
.app-promo-logo { width: 280px; margin: 0; transform: translateY(-110px); }

@media (max-width: 1050px) {
  .hero.page-width { min-height: 690px; padding-inline: 32px; }
  .hero-actions .button { width: auto; flex: 0 1 auto; }
}

@media (max-width: 900px) {
  /* Full-bleed photo, with all content over its empty left side. */
  .app-promo { display: flex; flex-direction: row; align-items: center; min-height: 520px; padding: 32px 20px; }
  .app-promo-visual { position: absolute; z-index: -1; inset: 0; width: 100%; aspect-ratio: auto; }
  .app-promo-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
  .app-promo-copy { --app-content-inset: 0px; width: 43%; max-width: 340px; padding: 0; }
  .app-promo-copy > a:first-child { height: 48px; margin-bottom: 22px; }
  .app-promo-logo { width: 180px; max-width: none; transform: translate(-24px, -71px); }
  .app-promo h2 { margin: 0; font-size: clamp(1rem, 2.5vw, 1.65rem); line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
  .app-qr-codes { width: 100%; max-width: 320px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 18px; }
  .app-qr-codes figure { transform: none; min-width: 0; }
  .app-qr-codes figcaption { font-size: 12px; line-height: 1.2; }
  .app-qr-codes a { display: block; }
}

@media (max-width: 760px) {
  /* The supplied expanded photo reserves its upper 40% for overlay copy. */
  .hero.page-width { min-height: 820px; padding: 26px 22px 480px; align-items: flex-start; }
  .hero-copy { width: 100%; max-width: 520px; margin: 0; padding: 0; }
  .hero h1 { font-size: clamp(1.8rem, 7.5vw, 2.7rem); margin-bottom: 14px; }
  .hero .eyebrow { font-size: .65rem; margin-bottom: 10px; }
  .hero-lead { max-width: 440px; font-size: .95rem; line-height: 1.4; margin-bottom: 18px; }
  .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 74% top; }
  .hero::after { background: linear-gradient(180deg, rgba(18,14,12,.62), rgba(18,14,12,.36) 30%, transparent 44%); }
  .hero-actions { gap: 8px; }
  .hero-actions .button { min-height: 42px; padding: 10px 16px; font-size: .85rem; }
  .bank-details div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .reader-toolbar { flex-wrap: wrap; gap: 10px; }
  .reader-footer { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .reader-footer > div { min-width: 0; gap: 8px; }
  .shop-cta .button { max-width: 100%; flex: initial; }
}

@media (max-width: 360px) {
  .header-inner { padding-left: 145px; padding-right: 56px; }
  .header .navarra-nav { min-width: 0; gap: 0; }
  .hero-copy { padding-inline: 20px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding-inline: 16px; font-size: .85rem; }
}