/* Inner-page hero band (all pages except home). */

.page-hero {
  padding-top: 20px;
}

.page-hero--slim .page-hero__row {
  min-height: 64px;
}

.page-hero--tall .page-hero__row {
  min-height: 104px;
}

.page-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.page-hero__eyebrow {
  font-size: 0.9375rem;
  line-height: 1.2;
  margin-bottom: 1px;
  opacity: 0.95;
}

/* Eyebrow as a link (country page → its region sales page). */
.page-hero__eyebrow a {
  color: var(--color-on-band);
  text-decoration: none;
}

.page-hero__eyebrow a:hover {
  text-decoration: none;
}

.page-hero__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* eyebrow + heading stacked to the right of the flag */
.page-hero__headingtext {
  display: flex;
  flex-direction: column;
}

.page-hero__heading h1 {
  font-size: var(--text-h1);
  line-height: 1.15;
  margin: 0;
}

.page-hero__flag {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
}

.page-hero__flag--square {
  border-radius: 12px;
}

.page-hero__flag--plain {
  background: none;
  border-radius: 0;
}

/* Balanced rectangular flag (country sales pages) — smaller, neat 3:2 ratio,
   only slightly rounded (matches the live flag corners). */
.page-hero__flag--rect {
  width: 54px;
  height: 38px;
  border-radius: 3px;
}

.page-hero__flag .fi {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.page-hero__flag--plain .fi {
  color: var(--color-on-band);
}

.page-hero__tagline {
  text-align: right;
  font-size: 1.125rem;
  line-height: 1.35;
  margin: 0;
  /* Wider so longer (e.g. French) taglines don't wrap a single word onto its
     own line — the heading side flexes to give up the room. */
  max-width: 480px;
}

.page-hero__breadcrumb {
  padding: 14px 0 10px;
  font-size: 0.9375rem;
}

.page-hero__breadcrumb ol {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-hero__breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-2);
  opacity: 0.7;
}

.page-hero__breadcrumb a {
  color: var(--color-on-band);
}

.page-hero__breadcrumb span {
  opacity: 0.85;
}

@media (max-width: 767px) {
  .page-hero__tagline {
    display: none;
  }

  .page-hero__heading h1 {
    font-size: var(--text-h2);
  }
}