/* =========================================================
   Landing hero + insurance cards (Figma node 190:55626)
   Markup: Components/LandingPage/HomeHero.razor

   Figma draws the page LTR-physical for an RTL reader; here every offset is logical, so
   `inset-inline-start` is Figma's `right`. Card art keeps its own (unmirrored) orientation.

   --al-card-k scales every art box and its hover geometry together, so the Figma
   proportions survive on narrower cards without a second set of numbers per breakpoint.
   ========================================================= */

.al-hero {
  --al-card-k: 1;
  --al-card-pad: var(--al-sp-lg);
  --al-card-title: 24px;
  --al-card-title-lh: 32px;
  --al-card-arrow: 40px;
  --al-car-bottom: 114px;
  --al-car-start: 23px;
  /* The regulator/ISO marks are dark artwork shown at 24% opacity; on the dark theme they
     would vanish, so they are drawn as a light monochrome silhouette instead. */
  --al-hero-badge-filter: none;
  --al-hero-badge-opacity: 0.24;
  /* Slide arrows: white glass over the cards. */
  --al-hero-glass-bg: rgba(255, 255, 255, 0.58);
  --al-hero-glass-border: rgba(255, 255, 255, 0.85);
  --al-hero-glass-icon: var(--al-heading);
  --al-hero-glass-shadow: 0 10px 30px rgba(14, 12, 14, 0.14), 0 2px 6px rgba(14, 12, 14, 0.08);
  /* Text on the selected (green) tab: dark in both themes — white on --al-primary fails contrast. */
  --al-hero-on-primary: #0e0c0e;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 1024px;
  padding-block: calc(var(--al-nav-h) + 120px) var(--al-sp-xl);
  background: var(--al-surface-hero);
}
[data-theme="dark"] .al-hero {
  --al-hero-badge-filter: brightness(0) invert(1);
  --al-hero-badge-opacity: 0.4;
  --al-hero-glass-bg: rgba(255, 255, 255, 0.34);
  --al-hero-glass-border: rgba(255, 255, 255, 0.55);
  --al-hero-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
/* The backdrop art is a pale wash; composited normally it greys the dark hero out. Soft-light
   keeps the surface dark and lets only the tint through. */
[data-theme="dark"] .al-hero__bg { mix-blend-mode: soft-light; }   /* on the stacking context, not the img */

.al-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.al-hero__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: var(--al-hero-bg-opacity);
}

.al-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--al-sp-2xl);
}

/* ---------------- Titles row ---------------- */
.al-hero__titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-sp-xl);
  width: 100%;
}
.al-hero__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  text-align: start;
}
.al-hero__title {
  font-weight: 400;
  font-size: 48px;
  line-height: 72px;
  color: var(--al-heading);
  text-wrap: balance;
}
.al-hero__subtitle {
  max-inline-size: 524px;
  font-size: 18px;
  line-height: 32px;
  color: var(--al-body);
}

.al-hero__licensed {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-sp-sm);
  flex-shrink: 0;
  padding-block-end: var(--al-sp-xl);
}
.al-hero__licensed-label {
  font-size: 16px;
  line-height: 24px;
  color: var(--al-text-3);
  text-align: center;
  white-space: nowrap;
}
.al-hero__licensed-logos {
  display: flex;
  align-items: center;
  gap: var(--al-sp-xl);
  opacity: var(--al-hero-badge-opacity);
  filter: var(--al-hero-badge-filter);
}
.al-hero__ia { width: 155.986px; height: 64px; }
.al-hero__iso { width: 64px; height: 64px; border-radius: 24px; object-fit: cover; }

/* ---------------- Tabs + slides ---------------- */
.al-hero__cards-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--al-sp-md);
  width: 100%;
  scroll-margin-top: calc(var(--al-nav-h) + var(--al-sp-md));
}

.al-hero__tabs {
  align-self: flex-start;
  display: inline-flex;
  gap: var(--al-sp-xxs);
  padding: 5px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: 999px;
}
.al .al-hero__tab {   /* .al: outranks the scoped button reset whatever the link order */
  min-height: 44px;
  padding: var(--al-sp-xs) var(--al-sp-lg);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--al-body);
  cursor: pointer;
  transition: background-color var(--al-dur-card) linear, color var(--al-dur-card) linear;
}
.al .al-hero__tab[aria-current="true"] { background: var(--al-primary); color: var(--al-hero-on-primary); }

/* One slide per tab, side by side; scroll-snap gives the swipe without script. The slides keep their
   own heights (flex-start) and dom-interop.js sizes the track to the selected one, so the shorter
   Businesses slide leaves no empty band on a phone or tablet. The height switches at once: an
   animated height would re-lay out everything below the hero for every frame of it. */
.al-hero__stage { position: relative; }
.al-hero__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.al-hero__track::-webkit-scrollbar { display: none; }
.al-hero__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/* Glass arrows: shown while the pointer is over the hero (or on keyboard focus); touch screens
   have no hover, so they swipe or use the tabs instead. The chevron is drawn pointing left
   ("previous" in LTR); RTL mirrors it, and "next" is the mirror of "previous". */
.al .al-hero__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border: 1px solid var(--al-hero-glass-border);
  border-radius: 50%;
  background: var(--al-hero-glass-bg);
  box-shadow: var(--al-hero-glass-shadow);
  color: var(--al-hero-glass-icon);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.al-hero__nav--prev { inset-inline-start: var(--al-sp-sm); }
.al-hero__nav--next { inset-inline-end: var(--al-sp-sm); }
.al-hero__nav svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir="rtl"] .al-hero__nav--prev svg,
[dir="ltr"] .al-hero__nav--next svg { transform: scaleX(-1); }
/* The blur is applied only while an arrow shows: a backdrop filter costs a render surface even at opacity 0. */
.al-hero:hover .al-hero__nav,
.al .al-hero__nav:focus-visible {
  opacity: 1;
  transform: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}
.al-hero:hover .al-hero__nav:not([disabled]):hover { transform: scale(1.06); }
.al .al-hero__nav:focus-visible { outline-offset: 3px; }   /* the outline itself is the base focus ring */
.al-hero:hover .al-hero__nav[disabled] { opacity: 0.3; cursor: default; transform: scale(0.94); }
@media (hover: none) {
  .al .al-hero__nav { display: none; }
}

/* ---------------- Cards (bento) ---------------- */
/* Figma: tall card 415px + a 849px block of 2 wide (417) over 3 small (273) cards.
   One grid of 1 + 6 tracks keeps that ratio at any width: 3.238fr ≈ 415 / 128.17.
   Placement is by position and count, so a slide's card order (HomeHero.Slides) is its layout:
   6 cards = tall + 2 wide + 3 small; 4 cards = tall + 2 wide + 1 across the bottom row. */
.al-hero__cards {
  display: grid;
  grid-template-columns: minmax(0, 3.238fr) repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(248px, auto));
  gap: var(--al-sp-md);
  width: 100%;
}
/* Desktop only: the tablet and phone grids (Responsive, below) place cards their own way. */
@media (min-width: 1024px) {
  .al-hero__cards > :first-child { grid-column: 1; grid-row: 1 / span 2; }
  .al-hero__cards > :nth-child(2),
  .al-hero__cards > :nth-child(3) { grid-column: span 3; }
  .al-hero__cards[data-count="6"] > :nth-child(n+4) { grid-column: span 2; }
  .al-hero__cards[data-count="4"] > :nth-child(4) { grid-column: span 6; }
}

.al .al-hero-card {   /* .al: outranks the scoped button reset whatever the link order */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  min-width: 0;
  min-height: 248px;
  padding: var(--al-card-pad);
  overflow: clip;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--al-sp-lg);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--al-dur-card) linear, filter var(--al-dur-card) linear;
}
.al-hero-card::before,
.al-hero-card::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--al-dur-card) linear;
}
/* Hover variant (Figma Container / Hover): faint top wash + inner bevel */
.al-hero-card::before {
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--al-secondary-light) 24%, transparent) 50%, transparent),
    var(--al-surface);
}
.al-hero-card::after {
  inset: -1px;
  z-index: 3;
  box-shadow:
    inset 1.5px 1.5px 3px 0 var(--al-surface),
    inset -1.5px -1.5px 3px 0 rgba(0, 0, 0, 0.04);
}
.al-hero-card:hover,
.al-hero-card:focus-visible {
  border-color: var(--al-primary);
  filter:
    drop-shadow(0 20px 10px rgba(0, 0, 0, 0.02))
    drop-shadow(0 6px 3px rgba(0, 0, 0, 0.02))
    drop-shadow(0 3.5px 1.75px rgba(0, 0, 0, 0.02))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.02))
    drop-shadow(0 0.8px 0.4px rgba(0, 0, 0, 0.02));
}
.al-hero-card:hover::before,
.al-hero-card:hover::after,
.al-hero-card:focus-visible::before,
.al-hero-card:focus-visible::after { opacity: 1; }

.al-hero-card__title {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  font-weight: 700;
  font-size: var(--al-card-title);
  line-height: var(--al-card-title-lh);
  color: var(--al-text);
  text-align: start;
}

.al-hero-card__arrow {
  position: relative;
  z-index: 2;
  display: block;
  align-self: flex-end;
  flex-shrink: 0;
  width: var(--al-card-arrow);
  height: var(--al-card-arrow);
}
/* The arrow points up toward the inline end; mirror it with the page. */
[dir="ltr"] .al-hero-card__arrow { transform: scaleX(-1); }
.al-hero-card__arrow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: opacity var(--al-dur-card) linear;
}
.al-hero-card__arrow .al-hero-card__arrow-hover { opacity: 0; }
.al-hero-card:hover .al-hero-card__arrow-hover,
.al-hero-card:focus-visible .al-hero-card__arrow-hover { opacity: 1; }
.al-hero-card:hover .al-hero-card__arrow img:not(.al-hero-card__arrow-hover),
.al-hero-card:focus-visible .al-hero-card__arrow img:not(.al-hero-card__arrow-hover) { opacity: 0; }

/* Art box: pinned to the bottom inline-start corner, grows on hover (Figma Hover variants). */
.al-hero-card__img {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  inset-inline-start: -1px;
  bottom: -1px;
  border-end-start-radius: var(--al-sp-lg);
  transition-property: width, height, inset-inline-start, bottom;
  transition-duration: var(--al-dur-card);
  transition-timing-function: linear;
}
.al-hero-card__img img {
  position: absolute;
  max-width: none;
  filter: var(--al-art-filter);
  transition-property: inset-inline-end, top, width, height;
  transition-duration: var(--al-dur-card);
  transition-timing-function: linear;
}

/* home */
.al-hero-card--home .al-hero-card__img {
  inset-inline-start: 0; bottom: 0;
  width: calc(174.755px * var(--al-card-k)); height: calc(128px * var(--al-card-k));
  border-end-start-radius: 23px;
}
.al-hero-card--home .al-hero-card__img img { height: 120.31%; width: 129.07%; inset-inline-end: -11.79%; top: 3.31%; }
.al-hero-card--home:is(:hover, :focus-visible) .al-hero-card__img {
  inset-inline-start: -1px; bottom: -1px;
  width: calc(196px * var(--al-card-k)); height: calc(143px * var(--al-card-k));
}
.al-hero-card--home:is(:hover, :focus-visible) .al-hero-card__img img { height: 119.58%; width: 127.78%; inset-inline-end: -12.09%; top: 3.79%; }

/* medical malpractice */
.al-hero-card--medical .al-hero-card__img { width: calc(238px * var(--al-card-k)); height: calc(149px * var(--al-card-k)); }
.al-hero-card--medical:is(:hover, :focus-visible) .al-hero-card__img { width: calc(265px * var(--al-card-k)); height: calc(167px * var(--al-card-k)); }
.al-hero-card--medical .al-hero-card__img img,
.al-hero-card--medical-tall .al-hero-card__img img,
.al-hero-card--domestic .al-hero-card__img img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* travel */
.al-hero-card--travel .al-hero-card__img { width: calc(235px * var(--al-card-k)); height: calc(160px * var(--al-card-k)); }
.al-hero-card--travel .al-hero-card__img img { height: 100%; width: 68.77%; inset-inline-end: 30.85%; top: 0.22%; }
.al-hero-card--travel:is(:hover, :focus-visible) .al-hero-card__img { width: calc(245px * var(--al-card-k)); height: calc(167px * var(--al-card-k)); }
.al-hero-card--travel:is(:hover, :focus-visible) .al-hero-card__img img { width: 68.53%; inset-inline-end: 31.58%; top: 0.32%; }

/* pets */
.al-hero-card--pet .al-hero-card__img { width: calc(234px * var(--al-card-k)); height: calc(160px * var(--al-card-k)); }
.al-hero-card--pet .al-hero-card__img img { height: 100%; width: 47.43%; inset-inline-end: 26.36%; top: -0.06%; }
.al-hero-card--pet:is(:hover, :focus-visible) .al-hero-card__img { width: calc(244px * var(--al-card-k)); height: calc(166px * var(--al-card-k)); }
.al-hero-card--pet:is(:hover, :focus-visible) .al-hero-card__img img { width: 47.27%; inset-inline-end: 26.37%; top: 0; }

/* domestic helper */
.al-hero-card--domestic .al-hero-card__img {
  inset-inline-start: -2px; bottom: -2px;
  width: calc(189px * var(--al-card-k)); height: calc(129px * var(--al-card-k));
}
.al-hero-card--domestic:is(:hover, :focus-visible) .al-hero-card__img {
  inset-inline-start: -1px; bottom: -1px;
  width: calc(197px * var(--al-card-k)); height: calc(134px * var(--al-card-k));
}

/* car — Figma mirrors the render so the car faces into the RTL card; LTR shows it unmirrored,
   which is the same mirror the rest of the page gets. The vehicle cards (motorcycle, leasing, motor
   SME) face the same way and get the same mirror; their art is 4:3, so it is fitted, not cropped. */
:is(.al-hero-card--car, .al-hero-card--vehicle) .al-hero-card__img { border-radius: 0; transform: scaleX(-1); }
[dir="ltr"] :is(.al-hero-card--car, .al-hero-card--vehicle) .al-hero-card__img { transform: none; }
:is(.al-hero-card--car, .al-hero-card--vehicle) .al-hero-card__img img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.al-hero-card--vehicle .al-hero-card__img img { object-fit: contain; object-position: bottom; }
.al-hero-card--car .al-hero-card__img {
  inset-inline-start: var(--al-car-start); bottom: var(--al-car-bottom);
  width: calc(353.239px * var(--al-card-k)); height: calc(223px * var(--al-card-k));
}
.al-hero-card--car:is(:hover, :focus-visible) .al-hero-card__img {
  inset-inline-start: calc(var(--al-car-start) + 1px); bottom: calc(var(--al-car-bottom) - 10px);
  width: calc(370.664px * var(--al-card-k)); height: calc(234px * var(--al-card-k));
}
.al-hero-card--vehicle .al-hero-card__img {
  inset-inline-start: var(--al-sp-md); bottom: var(--al-sp-sm);
  width: calc(200px * var(--al-card-k)); height: calc(150px * var(--al-card-k));
}
.al-hero-card--vehicle:is(:hover, :focus-visible) .al-hero-card__img {
  width: calc(212px * var(--al-card-k)); height: calc(159px * var(--al-card-k));
}

/* medical for businesses — the tall card of the Businesses slide; the photo fills its foot and stops
   short of the arrow's corner (card padding + arrow + a gap) */
.al-hero-card--medical-tall .al-hero-card__img {
  inset-inline-start: 0; bottom: 0;
  width: calc(100% - var(--al-card-pad) - var(--al-card-arrow) - var(--al-sp-xs)); height: auto; aspect-ratio: 238 / 149;
}

/* coming soon: takes no pointer at all — no hover, no press — while a swipe still reaches the track
   behind it. The art stays in full colour (the product's own picture); the muted title and the popup's
   own "coming soon" pill (hq-soon__badge), where the arrow would be, say it cannot be bought yet. */
.al-hero-card--soon { pointer-events: none; }
.al-hero-card--soon .al-hero-card__title { color: var(--al-text-3); }
/* The pill is wider than the arrow: on a narrow card the art gives way (it is fitted, so it scales, not crops). */
.al-hero-card--soon .al-hero-card__img { max-width: calc(100% - var(--al-card-pad) - 140px); }
.al-hero-card__soon {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  height: 28px;
  font-size: 13px;
}
[data-theme="dark"] .al-hero-card__soon { color: var(--al-primary); }   /* the pill's dark-green text is unreadable on a dark card */

/* ---------------- Hint ---------------- */
.al-hero__hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--al-text-2);
  text-align: center;
}

/* =========================================================
   Responsive
   ========================================================= */

/* 1024–1279: same bento, fluid; art and type step down so small cards (≈200px) still fit. */
@media (max-width: 1279.98px) {
  .al-hero {
    --al-card-k: 0.85;
    --al-card-title: 20px;
    --al-card-title-lh: 28px;
    --al-car-bottom: 96px;
    min-height: 0;
    padding-block: calc(var(--al-nav-h) + 80px) var(--al-sp-xl);
  }
  .al-hero__title { font-size: 44px; line-height: 64px; }
}

/* Tablet: titles stack centred, cards become a 2-column grid; the tall card and the last card
   run full width so the cards between them (four, or two) leave no hole. */
@media (max-width: 1023.98px) {
  .al-hero {
    --al-card-k: 0.85;
    --al-card-title: 22px;
    --al-card-title-lh: 32px;
    --al-car-bottom: 16px;
    --al-car-start: 24px;
    padding-block: calc(var(--al-nav-h) + 48px) var(--al-sp-xl);
  }
  .al-hero__content { gap: var(--al-sp-xl); }
  .al-hero__titles { flex-direction: column; gap: var(--al-sp-lg); }
  .al-hero__heading { align-items: center; text-align: center; }
  .al-hero__title { font-size: 40px; line-height: 56px; }
  .al-hero__subtitle { font-size: 16px; line-height: 28px; }
  .al-hero__licensed { align-self: center; padding-block-end: 0; }

  .al-hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .al-hero__cards > :first-child,
  .al-hero__cards > :last-child { grid-column: 1 / -1; }
  .al .al-hero__cards > :first-child { min-height: 280px; }
  .al-hero__cards > :first-child .al-hero-card__title { max-inline-size: 50%; }
  .al-hero-card--medical-tall .al-hero-card__img { width: 46%; }
  .al-hero__tabs { align-self: center; }
}

/* Mobile: one column of shorter cards; art shrinks to stay clear of title and arrow. */
@media (max-width: 559.98px) {
  .al-hero {
    --al-card-k: 0.7;
    --al-card-pad: var(--al-sp-md);
    --al-card-title: 20px;
    --al-card-title-lh: 28px;
    --al-card-arrow: 32px;
    --al-car-start: 16px;
    padding-block: calc(var(--al-nav-h) + 32px) var(--al-sp-lg);
  }
  .al-hero__title { font-size: 32px; line-height: 48px; }
  .al-hero__subtitle { font-size: 15px; line-height: 26px; }
  .al-hero__licensed-label { font-size: 14px; line-height: 20px; }
  .al-hero__licensed-logos { gap: var(--al-sp-lg); }
  .al-hero__ia { width: 117px; height: 48px; }
  .al-hero__iso { width: 48px; height: 48px; border-radius: 18px; }

  .al-hero__cards { grid-template-columns: minmax(0, 1fr); gap: var(--al-sp-sm); }
  .al .al-hero-card { min-height: 180px; border-radius: 20px; }
  .al .al-hero-card--car { --al-card-k: 0.62; }
  .al-hero__cards > :first-child .al-hero-card__title { max-inline-size: none; }
  .al .al-hero__cards > :first-child { min-height: 272px; } /* room for the title above the art; replaces the tablet 280px */
  .al-hero-card--medical-tall .al-hero-card__img { width: 72%; }

  .al-hero__tabs { align-self: stretch; }
  .al .al-hero__tab { flex: 1; padding-inline: var(--al-sp-sm); }

  .al-hero__hint { font-size: 13px; line-height: 20px; }
}

/* ---------------- Tap held before the page is interactive ----------------
   dom-interop.js adds .is-pending to a card tapped while the page is still starting; the arrow
   turns into a spinner until HomeHero opens the popup. */
.al-hero-card.is-pending { cursor: progress; }
.al-hero-card.is-pending .al-hero-card__arrow img { opacity: 0; }
.al-hero-card.is-pending .al-hero-card__arrow::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 3px solid var(--al-primary-light);
  border-top-color: var(--al-primary);
  animation: al-hero-spin .8s linear infinite;
}
@keyframes al-hero-spin { to { transform: rotate(360deg); } }

/* The slide change itself already jumps under reduced motion (dom-interop.js); so do these. */
@media (prefers-reduced-motion: reduce) {
  .al-hero__track,
  .al .al-hero__nav { transition: none; }
}