/* ============================================================
   KOBIL Industries (Overview) — Industry Teasers (all four)
   Figma: jhD6LDVa0CfkUz8tixyG7B / 3191:26591
   Four standalone 1360x630 cards, 40px apart.
   ============================================================ */

/* The section is transparent: its cards become flex items of <main class="page">
   so the page's 20px gap + each card's 20px margin-top = 40px separation. */
.sec-all-teasers {
  display: contents;
}

.sec-all-teasers__clipdef {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ---- Card shell ---- */

.sec-all-teasers__card {
  position: relative;
  width: 100%;
  min-width: 0; /* allow shrink below the photo's intrinsic width when a flex item */
  max-width: 100%;
  min-height: 630px;
  margin-top: 20px;
  border-radius: 32px;
  isolation: isolate;
  background: #eef2fa;
  /* rounded rect + bottom-right chamfer, scales with the box */
  clip-path: url(#teaser-card-clip);
}

/* Background (soft blurred blobs + light fill + hairline stroke), baked per industry.
   object-fit:fill keeps the shaped frame + stroke locked to the card corners. */
.sec-all-teasers__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* Foreground cutout photo (positioned in-frame), bleeds to the right edge. */
.sec-all-teasers__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  pointer-events: none;
}

/* Floating product mock-up card. */
.sec-all-teasers__figure {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}

/* ---- Text column ---- */

/* Vertical rhythm: eyebrow -(20)- title -(16)- desc -(40)- cta */
.sec-all-teasers__content {
  position: absolute;
  z-index: 3;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 560px;
  max-width: calc(100% - 100px);
}

.sec-all-teasers__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: var(--blue);
  text-transform: uppercase;
}

.sec-all-teasers__title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: var(--navy);
}

.sec-all-teasers__hl {
  color: var(--blue);
}

.sec-all-teasers__desc {
  margin: 0 0 40px;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--navy-80);
}

.sec-all-teasers__desc--lg {
  font-size: 18px;
  line-height: 26px;
}

/* ---- CTA: "Learn More" with a notched (chamfered) bottom-right corner ---- */

.sec-all-teasers__cta {
  --cta-bg: var(--blue);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px 0 24px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.sec-all-teasers__cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 18px 0 0;
  border-radius: 8px 0 0 8px;
  background: var(--cta-bg);
  transition: background-color var(--dur) var(--ease);
}

.sec-all-teasers__cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: var(--cta-bg);
  clip-path: path("M0 0H40Q48 0 48 8V26L26 48H0Z");
  transition: background-color var(--dur) var(--ease);
}

.sec-all-teasers__cta-label,
.sec-all-teasers__cta-icon {
  position: relative;
  z-index: 1;
}

.sec-all-teasers__cta-icon {
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}

.sec-all-teasers__cta:hover {
  --cta-bg: #1e4fd6;
}

.sec-all-teasers__cta:hover .sec-all-teasers__cta-icon {
  transform: translateX(3px);
}

.sec-all-teasers__cta:active {
  transform: translateY(1px);
}

.sec-all-teasers__cta:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ---- Per-card content widths ---- */

.sec-all-teasers__card--healthcare .sec-all-teasers__content { width: 518px; }
.sec-all-teasers__card--media .sec-all-teasers__content { width: 599px; }

/* ---- Per-card floating figure placement (percentages of the 1360x630 card) ---- */

.sec-all-teasers__card--financial .sec-all-teasers__figure {
  left: 51.25%;
  top: 43.33%;
  width: 19.30%;
  filter: drop-shadow(5.8px 5.8px 5.117px rgba(0, 0, 0, 0.07));
}
.sec-all-teasers__card--public .sec-all-teasers__figure {
  left: 52.35%;
  top: 32.06%;
  width: 19.49%;
  filter: drop-shadow(2.438px 2.438px 5.83px rgba(0, 0, 0, 0.07));
}
.sec-all-teasers__card--healthcare .sec-all-teasers__figure {
  left: 52.28%;
  top: 31.75%;
  width: 20.65%; /* 280.88px of 1360 (Figma card hug width) */
  filter: drop-shadow(0 5px 16px rgba(17, 36, 74, 0.12));
}
.sec-all-teasers__card--media .sec-all-teasers__figure {
  left: 52.06%;
  top: 30.48%;
  width: 18.53%;
  filter: drop-shadow(0 5px 16px rgba(17, 36, 74, 0.12));
}

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

/* Fluidly shrink the fixed desktop composition down to ~1024. */
@media (max-width: 1200px) {
  .sec-all-teasers__title { font-size: 34px; line-height: 44px; }
  .sec-all-teasers__desc--lg { font-size: 16px; line-height: 23px; }
  .sec-all-teasers__content { left: 40px; }
  .sec-all-teasers__card--healthcare .sec-all-teasers__content,
  .sec-all-teasers__card--media .sec-all-teasers__content,
  .sec-all-teasers__content { width: 46%; }
}

/* Tablet & below: stack text over a photo band. */
@media (max-width: 1024px) {
  .sec-all-teasers__card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 44px 40px 0;
    border-radius: 24px;
    overflow: clip;
    clip-path: none;
  }

  .sec-all-teasers__bg { object-fit: cover; }

  /* DOM order becomes: photo band, floating figure (overlapping up), text */
  .sec-all-teasers__content {
    position: static;
    transform: none;
    width: 100% !important;
    max-width: 620px;
    order: 3;
  }

  .sec-all-teasers__title { font-size: 32px; line-height: 40px; }

  /* photo becomes a top band that bleeds to the card edges */
  .sec-all-teasers__photo {
    position: relative;
    inset: auto;
    order: 1;
    min-width: 0;
    width: calc(100% + 80px);
    margin: 0 -40px;
    height: 340px;
    object-position: right bottom;
  }

  /* floating mock-up peeks up from the photo band, left-aligned */
  .sec-all-teasers__figure {
    position: relative;
    order: 2;
    left: auto !important;
    top: auto;
    align-self: flex-start;
    width: 210px !important;
    margin: -64px 0 0 0;
  }
  .sec-all-teasers__card--healthcare .sec-all-teasers__figure { width: 217px !important; }
}

@media (max-width: 768px) {
  .sec-all-teasers__card {
    gap: 24px;
    padding: 36px 24px 0;
  }
  .sec-all-teasers__title { font-size: 28px; line-height: 36px; }
  .sec-all-teasers__eyebrow { margin-bottom: 16px; }
  .sec-all-teasers__desc { margin-bottom: 32px; }
  .sec-all-teasers__photo { height: 300px; width: calc(100% + 48px); margin: 0 -24px; }
  .sec-all-teasers__figure {
    width: 190px !important;
    margin-top: -56px;
  }
  .sec-all-teasers__card--healthcare .sec-all-teasers__figure { width: 195px !important; }
}

@media (max-width: 480px) {
  .sec-all-teasers__card {
    padding: 28px 16px 0;
    border-radius: 20px;
  }
  .sec-all-teasers__title { font-size: 24px; line-height: 32px; }
  .sec-all-teasers__desc,
  .sec-all-teasers__desc--lg { font-size: 15px; line-height: 22px; }
  .sec-all-teasers__photo { height: 240px; width: calc(100% + 32px); margin: 0 -16px; }
  .sec-all-teasers__figure {
    width: 168px !important;
    margin-top: -48px;
  }
  .sec-all-teasers__card--healthcare .sec-all-teasers__figure { width: 172px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-all-teasers__cta,
  .sec-all-teasers__cta-icon {
    transition: none;
  }
}