/* =========================================================
   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;

  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;
}
/* 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; }

/* ---------------- Cards (bento) ---------------- */
.al-hero__cards-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--al-sp-md);
  width: 100%;
}

/* Figma: car 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. */
.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%;
  scroll-margin-top: calc(var(--al-nav-h) + var(--al-sp-md));
}
.al-hero-card--car { grid-column: 1; grid-row: 1 / span 2; }
.al-hero-card--medical,
.al-hero-card--home { grid-column: span 3; }
.al-hero-card--domestic,
.al-hero-card--pet,
.al-hero-card--travel { grid-column: span 2; }

.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--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. */
.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));
  border-radius: 0;
  transform: scaleX(-1);
}
[dir="ltr"] .al-hero-card--car .al-hero-card__img { transform: none; }
.al-hero-card--car .al-hero-card__img img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.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));
}

/* ---------------- Hint + medical (SME) entry ---------------- */
.al-hero__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--al-sp-xs);
  row-gap: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--al-text-2);
  text-align: center;
}
.al .al-hero__hint-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: var(--al-sp-xxs);
  font-weight: 500;
  color: var(--al-c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}
.al .al-hero__hint-link:hover { color: var(--al-secondary); }

/* =========================================================
   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 car and the last card
   run full width so the five remaining cards 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-card--car,
  .al-hero-card--travel { grid-column: 1 / -1; grid-row: auto; }
  .al-hero-card--medical,
  .al-hero-card--home,
  .al-hero-card--domestic,
  .al-hero-card--pet { grid-column: auto; }
  .al-hero-card--car { min-height: 280px; }
  .al-hero-card--car .al-hero-card__title { max-inline-size: 50%; }
}

/* 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; min-height: 272px; } /* room for the title above the car */
  .al-hero-card--car .al-hero-card__title { max-inline-size: none; }

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

/* ---------------- Tap held before the page is interactive ----------------
   dom-interop.js adds .is-pending to a card (or the medical link) 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;
}
.al-hero__hint-link.is-pending { cursor: progress; opacity: .6; }
@keyframes al-hero-spin { to { transform: rotate(360deg); } }