/* ==========================================================================
   inner_banner — page-top banner. One height for every inner page (func. spec
   00.4.2: --ex-banner-h, 521px, as on the Products page).
   Geometry as RENDERED by 9 of the 11 image banners of the mockups (Istoria,
   ESG, Articles, Anakainizo, Showroom, Egkatastaseis, Contact, Career,
   Complaint): text vertically centred, eyebrow 11px / .26em, h1 57px,
   gradient .85 → .5 → .12.
   Modifier --landing = the Products and Erga landing banners: text bottom-left
   in an 860px column, eyebrow 13.5px / .24em, h1 64px, stronger gradient.
   Reused by fixed templates: .ex-inner-banner, __media, __content, __eyebrow,
   __title, __text, __actions, modifiers --landing, --no-image. Self-contained:
   the element classes need no base typography class. Add .ex-on-dark on the
   block when it has an image (switches buttons / focus ring to their on-dark look).
   ========================================================================== */
.ex-inner-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--ex-banner-h);
  overflow: hidden;
  background: var(--ex-dark);
  color: var(--ex-white);
}

.ex-inner-banner__media { position: absolute; inset: 0; }
.ex-inner-banner__media > img,
.ex-inner-banner__media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ex-inner-banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32, 35, 43, .85) 0%, rgba(32, 35, 43, .5) 55%, rgba(32, 35, 43, .12) 100%);
  pointer-events: none;
}

.ex-inner-banner__content {
  position: relative;
  z-index: var(--ex-z-raised);
  width: 100%;
  padding: 32px var(--ex-gutter);
}

.ex-inner-banner__eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: normal; /* rendered: 12px line */
  letter-spacing: .26em;
  color: inherit;
}

.ex-inner-banner__title {
  margin: 0;
  font-size: var(--ex-fs-banner);
  font-weight: var(--ex-fw-title);
  line-height: .98;
  letter-spacing: var(--ex-ls-title);
  color: inherit;
  overflow-wrap: break-word;
}

.ex-inner-banner__text {
  margin: 14px 0 0;
  max-width: 760px;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.65;
  color: inherit;
}

.ex-inner-banner__actions { margin-top: 18px; }

/* Products / Erga landing. --category (taxonomy-product_category.php, styled in templates/product-category.css) shares only the bottom-left placement. */
.ex-inner-banner--landing,
.ex-inner-banner--category { justify-content: flex-end; }
.ex-inner-banner--landing .ex-inner-banner__content {
  max-width: calc(var(--ex-measure-wide) + 2 * var(--ex-gutter));
  padding-block: clamp(32px, 4vw, 56px);
}
.ex-inner-banner--landing .ex-inner-banner__media::after { background: linear-gradient(90deg, rgba(32, 35, 43, .92) 0%, rgba(32, 35, 43, .55) 55%, rgba(32, 35, 43, .15) 100%); }
.ex-inner-banner--landing { --ex-fs-banner: var(--ex-fs-banner-lg); }
.ex-inner-banner--landing .ex-inner-banner__eyebrow { margin-bottom: 16px; font-size: var(--ex-fs-eyebrow); letter-spacing: var(--ex-ls-eyebrow); }

/* No image: the designed plain state (EXALCO-Quote / -Quiz intro) — white, ink text, natural height. */
.ex-inner-banner--no-image {
  display: block;
  min-height: 0;
  overflow: visible;
  background: var(--ex-white);
  color: var(--ex-ink);
}
.ex-inner-banner--no-image .ex-inner-banner__content {
  max-width: none;
  padding-block: var(--ex-section-y-sm);
}
/* The eyebrow of the plain state is the section eyebrow (13.5px / .24em), as on EXALCO-Quiz. */
.ex-inner-banner--no-image .ex-inner-banner__eyebrow { margin-bottom: 14px; font-size: var(--ex-fs-eyebrow); letter-spacing: var(--ex-ls-eyebrow); }
.ex-inner-banner--no-image .ex-inner-banner__actions { margin-top: 22px; }
/* Mockup: no bottom padding when a white section follows (its own top padding is the gap). */
.ex-inner-banner--no-image:has(+ .ex-section:not(.ex-section--tint):not(.ex-section--blue):not(.ex-section--dark):not(.ex-section--flush-top)) .ex-inner-banner__content { padding-bottom: 0; }

@media (max-width: 899px) {
  .ex-inner-banner__content,
  .ex-inner-banner--landing .ex-inner-banner__content { padding-block: 28px; }
  .ex-inner-banner__media::after,
  .ex-inner-banner--landing .ex-inner-banner__media::after { background: linear-gradient(90deg, rgba(32, 35, 43, .92) 0%, rgba(32, 35, 43, .7) 60%, rgba(32, 35, 43, .4) 100%); }
  .ex-inner-banner__eyebrow,
  .ex-inner-banner--landing .ex-inner-banner__eyebrow,
  .ex-inner-banner--no-image .ex-inner-banner__eyebrow { margin-bottom: 12px; font-size: 11.5px; letter-spacing: .2em; }
  .ex-inner-banner__title { font-size: clamp(30px, 7.4vw, 44px); }
  .ex-inner-banner--no-image .ex-inner-banner__content { padding-block: var(--ex-section-y-sm); }
}

@media (max-width: 599px) {
  .ex-inner-banner__content,
  .ex-inner-banner--landing .ex-inner-banner__content { padding-block: 22px; }
  .ex-inner-banner__actions .ex-btn { flex: 1 1 auto; }
  .ex-inner-banner--no-image .ex-inner-banner__content { padding-block: var(--ex-section-y-sm); }
}