/* FEATURE-PANEL v2 — "About us" split: photo left, dark diagonal-cut panel right.
   Inspired by cloudroofing.com's "About Cloud Roofing" section (see SOURCE.md).
   Classes prefixed .fpanel2-. Dark surface + accent are token-derived via color-mix(),
   never hardcoded hex. Mobile-first: base rules are the stacked/straight-edge layout,
   the two-column diagonal split is a min-width override (see SOURCE.md § mobile). */

.fpanel2 {
  /* Slant depth of the diagonal cut, reused for both the clip-path and the overlap
     margin that lets the photo show through the cut corner (see SOURCE.md § diagonal).
     5rem matches the exact value found in cloudroofing.com's source CSS. */
  --fpanel2-slant: 5rem;
  --fpanel2-on-dark: var(--c-primary-contrast);
  --fpanel2-on-dark-muted: color-mix(in srgb, var(--c-primary-contrast) 74%, transparent);

  background: var(--c-bg);
}

.fpanel2-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.fpanel2-photo-wrap {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.fpanel2-photo {
  /* absoluut, zodat de intrinsieke foto-hoogte NOOIT de grid-rij oprekt — met een
     staande foto groeide de hele sectie mee (Giu's review 2026-07-05: "veel te
     groot"). De content-kolom bepaalt de hoogte; de foto vult en cropt. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fpanel2-panel {
  position: relative;
  background: linear-gradient(
    160deg,
    var(--c-dark-1) 0%,
    var(--c-dark-3) 100%
  );
}

.fpanel2-content {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.fpanel2-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-accent);
}

.fpanel2-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fpanel2-on-dark);
  margin: 0;
}

.fpanel2-text {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--fpanel2-on-dark-muted);
  margin: 0;
  max-width: 42rem;
}

/* --- 2x2 checkmark grid (single column on small screens) --- */

.fpanel2-checks {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.fpanel2-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fpanel2-on-dark);
}

.fpanel2-check-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* --- Actions: primary (accent, no shine) + outline-light, mirrors hero3's button
   treatment (lift-on-hover only) rather than the shared .msl-btn--primary, which
   carries a shine-sweep — this page's one shine budget belongs elsewhere, see
   SOURCE.md § one-shine-per-page. --- */

.fpanel2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-2);
}

.fpanel2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.fpanel2-btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  box-shadow: var(--shadow-cta);
}

.fpanel2-btn--primary:hover {
  transform: translateY(-2px);
}

.fpanel2-btn--primary svg {
  transition: transform var(--t-fast) var(--ease);
}

.fpanel2-btn--primary:hover svg {
  transform: translateX(3px);
}


/* shine-sweep op de primary (Giu 2026-07-05: elke primary CTA shiny; hover-only) */
.fpanel2-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fpanel2-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}

@media (hover: hover) {
  .fpanel2-btn--primary:hover::after {
    transition: transform 600ms var(--ease);
    transform: translateX(120%);
  }
}

.fpanel2-btn--outline {
  background: color-mix(in srgb, var(--c-primary-contrast) 8%, transparent);
  border-color: color-mix(in srgb, var(--c-primary-contrast) 32%, transparent);
  color: var(--c-primary-contrast);
}

.fpanel2-btn--outline:hover {
  background: color-mix(in srgb, var(--c-primary-contrast) 16%, transparent);
  border-color: color-mix(in srgb, var(--c-primary-contrast) 48%, transparent);
}

@media (max-width: 640px) {
  .fpanel2-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Desktop: two-column split + diagonal cut ---
   Panel becomes a grid sibling of the photo, pulled left by --fpanel2-slant so its box
   overlaps the photo column; its own clip-path removes the matching top-left triangle,
   letting the photo show through the notch instead of a flat background gap. */
@media (min-width: 900px) {
  .fpanel2-grid {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
  }

  .fpanel2-photo-wrap {
    min-height: 0;
  }

  .fpanel2-panel {
    margin-left: calc(var(--fpanel2-slant) * -1);
    clip-path: polygon(var(--fpanel2-slant) 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    align-items: center;
  }

  .fpanel2-content {
    /* base left padding + the slant depth, so text never sits under the cut corner
       regardless of how far down the panel it falls (see SOURCE.md § diagonal). */
    padding: var(--space-5) var(--space-4) var(--space-5) calc(var(--space-4) + var(--fpanel2-slant));
  }

  .fpanel2-checks {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fpanel2-btn,
  .fpanel2-btn--primary svg {
    transition-duration: 0.01ms;
  }
}