/*
  Hero designs (block "heroSection", CmsHeroCatalog). Structure comes from .cms-herox--{layout};
  each .cms-hero-NN only sets its backdrop and a few accents. Buttons and highlights use the theme
  colours, so every design follows the site's theme. Logical properties keep RTL correct.

  Per-design variables: --hx-bg (backdrop colour), --hx-overlay (layer over a photo),
  --hx-text, --hx-hl (highlighted words), --hx-btn / --hx-btn-text (primary button).
*/
.cms-herox {
  /* The designs' own backdrops are fixed colours, so their text is too (not the theme's text colour). */
  --hx-text: #14181f; --hx-hl: var(--cms-primary);
  --hx-btn: var(--cms-primary); --hx-btn-text: var(--cms-primary-contrast);
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  color: var(--hx-text);
}
.cms-herox__backdrop { position: absolute; inset: 0; z-index: -1; background-color: var(--hx-bg, var(--cms-bg)); background-size: cover; background-position: center; }
.cms-herox__backdrop::after { content: ""; position: absolute; inset: 0; background: var(--hx-overlay, transparent); }

/* Dark designs: light text, accent highlights and buttons. */
.cms-hero-01, .cms-hero-02, .cms-hero-05, .cms-hero-06, .cms-hero-09, .cms-hero-11, .cms-hero-18 {
  --hx-text: #fff; --hx-hl: var(--cms-accent); --hx-btn: var(--cms-accent); --hx-btn-text: var(--cms-accent-contrast);
}

/* A background chosen in the section settings replaces the design's backdrop; text follows it. */
.cms-herox.cms-bg-primary:not(.cms-tone-dark), .cms-herox.cms-bg-dark:not(.cms-tone-dark), .cms-herox.cms-tone-light {
  --hx-text: #fff; --hx-hl: var(--cms-accent); --hx-btn: var(--cms-accent); --hx-btn-text: var(--cms-accent-contrast);
}
.cms-herox:is(.cms-bg-default, .cms-bg-surface, .cms-bg-accent):not(.cms-tone-light), .cms-herox.cms-tone-dark {
  --hx-text: var(--cms-text); --hx-hl: var(--cms-primary); --hx-btn: var(--cms-primary); --hx-btn-text: var(--cms-primary-contrast);
}

/* ---- Structure ---- */
.cms-herox__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cms-herox--split .cms-herox__inner { grid-template-columns: 1.05fr .95fr; }
.cms-herox--split-start .cms-herox__inner { grid-template-columns: .95fr 1.05fr; }
.cms-herox--panel .cms-herox__inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
.cms-herox--studio .cms-herox__inner { grid-template-columns: 1.5fr .5fr; }
.cms-herox--cover .cms-herox__copy { max-width: 900px; margin-inline: auto; text-align: center; }
.cms-herox--cover .cms-herox__actions { justify-content: center; }
.cms-herox--cover .cms-herox__lead, .cms-herox--cover .cms-herox__title { margin-inline: auto; }

.cms-herox__eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cms-herox__title { font-family: var(--cms-font-heading); font-weight: var(--cms-heading-weight); font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.1; margin: .7rem 0 1rem; max-width: 16ch; color: inherit; }
.cms-herox__hl { color: var(--hx-hl); }
.cms-herox__lead { font-size: 1.08rem; max-width: 54ch; opacity: .85; margin: 0; }
.cms-herox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.8rem; }
.cms-herox__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: var(--cms-button-radius); font-weight: 700; font-size: .9rem; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.cms-herox__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
.cms-herox__btn:focus-visible { outline: 3px solid var(--hx-hl); outline-offset: 2px; }
.cms-herox__btn--primary { background: var(--hx-btn); color: var(--hx-btn-text) !important; }
.cms-herox__btn--secondary { background: transparent; color: inherit !important; border-color: currentColor; }
.cms-herox__note { margin: 1.2rem 0 0; font-size: .9rem; opacity: .8; }
.cms-herox__note a { color: var(--hx-hl); font-weight: 700; }

.cms-herox__media { position: relative; }
.cms-herox__media img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--cms-radius); }

.cms-herox__search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; margin-top: 2rem; padding: .6rem; background: #fff; color: #14181f; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .12); max-width: 640px; }
.cms-herox__search-field { flex: 1 1 140px; display: grid; gap: .15rem; padding: .35rem .8rem; border-inline-end: 1px solid #e5e7eb; margin: 0; }
.cms-herox__search-field span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.cms-herox__search-field input { border: 0; outline: 0; background: transparent; font: inherit; font-size: .9rem; color: inherit; padding: 0; min-width: 0; }
.cms-herox__search .cms-herox__btn { flex: 0 0 auto; }

.cms-herox__stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2rem 0 0; }
.cms-herox__stats div { display: grid; gap: .1rem; }
.cms-herox__stats dt { font-size: 1.7rem; font-weight: 800; color: var(--hx-hl); line-height: 1.1; }
.cms-herox__stats dd { margin: 0; font-size: .85rem; opacity: .75; }

.cms-herox__list { list-style: none; counter-reset: hx; margin: 0; padding: 1.4rem 1.8rem; background: rgba(15, 10, 20, .7); border-radius: 6px; color: #fff; display: grid; gap: .9rem; }
.cms-herox__list li { counter-increment: hx; display: flex; gap: 1.2rem; font-size: .92rem; }
.cms-herox__list li::before { content: counter(hx); opacity: .6; font-weight: 700; }

/* ---- Designs ---- */
/* 01 Classic Corporate */
.cms-hero-01 { --hx-bg: #1b2326; --hx-overlay: rgba(8, 12, 14, .62); }
.cms-hero-01 .cms-herox__btn--primary { background: transparent; color: #fff !important; border-color: #fff; }

/* 02 Classic Business */
.cms-hero-02 { --hx-bg: #202020; --hx-overlay: rgba(0, 0, 0, .55); }
.cms-hero-02 .cms-herox__title { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 14ch; }

/* 03 Classic Web Agency */
.cms-hero-03 { --hx-bg: #e7e7e7; }
.cms-hero-03 .cms-herox__copy { text-align: center; }
.cms-hero-03 .cms-herox__title, .cms-hero-03 .cms-herox__lead { margin-inline: auto; }
.cms-hero-03 .cms-herox__actions { justify-content: center; }
.cms-hero-03 .cms-herox__media img { border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, .15); }

/* 04 Travel Agency */
.cms-hero-04 { --hx-bg: #fff; }
.cms-hero-04 .cms-herox__eyebrow { color: var(--cms-primary); letter-spacing: .04em; text-transform: none; }
.cms-hero-04 .cms-herox__media img { border-radius: 28px 28px 28px 120px; aspect-ratio: 4 / 5; max-height: 560px; }

/* 05 Classic Startup */
.cms-hero-05 { --hx-bg: #0b1d24; --hx-overlay: rgba(6, 25, 33, .74); }
.cms-hero-05 .cms-herox__title { font-size: clamp(2.8rem, 7.5vw, 5.6rem); text-transform: uppercase; letter-spacing: .02em; max-width: 12ch; line-height: 1.02; }
.cms-hero-05 .cms-herox__eyebrow { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1rem; }

/* 06 Classic Interactive */
.cms-hero-06 { --hx-bg: #14236e; --hx-overlay: linear-gradient(180deg, rgba(18, 32, 110, .72), rgba(18, 32, 110, .55)); }
.cms-hero-06 .cms-herox__title { text-transform: uppercase; font-size: clamp(2.4rem, 5.6vw, 4.2rem); max-width: 14ch; }
.cms-hero-06 .cms-herox__eyebrow { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1rem; }
.cms-hero-06 .cms-herox__btn--primary { background: #fff; color: #14236e !important; border-radius: 999px; }

/* 07 Classic Digital Agency */
.cms-hero-07 { --hx-bg: #eef3e7; }
.cms-hero-07 .cms-herox__title { font-size: clamp(2.4rem, 5vw, 4rem); }
.cms-hero-07 .cms-herox__btn { border-radius: 999px; }
.cms-hero-07 .cms-herox__btn--primary { background: #111; color: #fff !important; }
.cms-hero-07 .cms-herox__media img { box-shadow: 0 40px 70px rgba(0, 0, 0, .2); }

/* 08 Ecommerce */
.cms-hero-08 { --hx-bg: #efe8e2; }
.cms-hero-08 .cms-herox__btn--primary { background: #1d1d1d; color: #fff !important; border-radius: 4px; }
.cms-hero-08 .cms-herox__btn--primary::after { content: "→"; }
.cms-hero-08 .cms-herox__media img { border-radius: 0; max-height: 600px; aspect-ratio: 1; object-fit: cover; }

/* 09 Classic Innovation Agency */
.cms-hero-09 { --hx-bg: #111; --hx-overlay: rgba(0, 0, 0, .3); }
.cms-hero-09 .cms-herox__copy { background: var(--cms-primary); color: var(--cms-primary-contrast); padding: clamp(2rem, 4vw, 3.5rem); border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.cms-hero-09 .cms-herox__btn--primary { background: #fff; color: #111 !important; border-radius: 999px; }

/* 10 Classic Corporate (light) */
.cms-hero-10 { --hx-bg: #fff; }
.cms-hero-10 .cms-herox__media img { aspect-ratio: 1; max-height: 540px; border-radius: 62% 38% 58% 42% / 48% 58% 42% 52%; }
.cms-hero-10 .cms-herox__btn--secondary { border-color: transparent; color: var(--hx-hl) !important; padding-inline: .4rem; }

/* 11 Creative Studio */
.cms-hero-11 { --hx-bg: #3a0a44; --hx-overlay: linear-gradient(120deg, rgba(60, 8, 70, .88), rgba(150, 20, 120, .55)); padding-inline-start: 56px; }
.cms-hero-11::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 56px; background: #fff; border-block-start: 56px solid var(--cms-accent); }
.cms-hero-11 .cms-herox__title { font-size: clamp(2.6rem, 6vw, 4.8rem); }

/* 12 Online Course */
.cms-hero-12 { --hx-bg: #fff; }
.cms-hero-12 .cms-herox__media { justify-self: center; width: min(100%, 440px); }
.cms-hero-12 .cms-herox__media::before { content: ""; position: absolute; inset: -6% -10% auto auto; width: 70%; height: 70%; z-index: -1; background: radial-gradient(var(--cms-primary) 1.5px, transparent 1.6px) 0 0 / 16px 16px; opacity: .35; }
.cms-hero-12 .cms-herox__media img { aspect-ratio: 1; border-radius: 50%; }

/* 13 IT Solution */
.cms-hero-13 { --hx-bg: #f3f6ff; }
.cms-hero-13 .cms-herox__backdrop { background-image: linear-gradient(180deg, #f3f6ff, #fff); }
.cms-hero-13 .cms-herox__backdrop::after { inset: -20% -10% auto auto; width: 55%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--cms-primary) 8%, transparent); }
.cms-hero-13 .cms-herox__title { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.cms-hero-13 .cms-herox__btn { border-radius: 999px; }
.cms-hero-13 .cms-herox__media img { border-radius: 0; object-fit: contain; }

/* 14 Property Directory */
.cms-hero-14 { --hx-bg: #fff; }
.cms-hero-14 .cms-herox__media img { border-radius: 0; aspect-ratio: 4 / 5; max-height: 580px; }

/* 15 Food Ecommerce */
.cms-hero-15 { --hx-bg: #f5f1ea; --hx-overlay: rgba(255, 255, 255, .74); }

/* 16 Learning Platform */
.cms-hero-16 { --hx-bg: #fff; }
.cms-hero-16 .cms-herox__eyebrow { text-transform: none; letter-spacing: 0; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.cms-hero-16 .cms-herox__eyebrow::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cms-primary); }
.cms-hero-16 .cms-herox__btn { border-radius: 999px; }
.cms-hero-16 .cms-herox__btn--secondary { border-color: transparent; padding-inline: .3rem; }
.cms-hero-16 .cms-herox__btn--secondary::before { content: "▶"; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--cms-accent); color: var(--cms-accent-contrast); font-size: .7rem; }
.cms-hero-16 .cms-herox__media { padding: 2rem; background: linear-gradient(var(--cms-primary), var(--cms-primary)) no-repeat 70% 50% / 62% 86%; }
.cms-hero-16 .cms-herox__media img { border-radius: 0; object-fit: contain; }

/* 17 Real Estate */
.cms-hero-17 { --hx-bg: #fff; }
.cms-hero-17 .cms-herox__media img { aspect-ratio: 4 / 5; max-height: 580px; border-radius: 6px; }

/* 18 Fitness Center */
.cms-hero-18 { --hx-bg: #0b0b0b; }
.cms-hero-18 .cms-herox__title { font-size: clamp(3rem, 7.5vw, 6rem); line-height: 1; }
.cms-hero-18 .cms-herox__btn { border-radius: 4px; }
.cms-hero-18 .cms-herox__btn--secondary { background: #262626; border-color: #262626; }
.cms-hero-18 .cms-herox__media img { border-radius: 0; object-fit: cover; aspect-ratio: 4 / 5; max-height: 600px; }
.cms-hero-18 .cms-herox__stats { position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.25rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); flex-direction: column; gap: 1rem; margin: 0; text-align: end; }
.cms-hero-18 .cms-herox__stats dt { font-size: 2.2rem; }

/* ---- Small screens ---- */
@media (max-width: 991px) {
  .cms-herox .cms-herox__inner { grid-template-columns: 1fr; }
  .cms-herox--panel .cms-herox__spacer { display: none; }
  .cms-herox--split-start .cms-herox__media { order: 2; }
  .cms-hero-11 { padding-inline-start: 0; }
  .cms-hero-11::before { display: none; }
  .cms-hero-18 .cms-herox__stats { position: static; flex-direction: row; text-align: start; margin-top: 1rem; }
  .cms-herox__search-field { border-inline-end: 0; border-block-end: 1px solid var(--cms-border); }
}