/**
 * partners.css
 * Styles for the "Partnereink" (Partners) section.
 *
 * Displays partner logos in a notched grid. On hover, each logo shrinks
 * to nothing while a growing filled circle and the partner's URL appear,
 * creating a reveal animation.
 *
 * The main grid is 4 columns; a separate .partners-grid-extra row (flexbox,
 * centered) holds any partners added after the last full row of 4, so a
 * partial row is centered instead of sitting left-aligned like a CSS grid
 * would leave it by default.
 *
 * Reuses --mhm-* tokens from main.css, --card-bg from services.css,
 * and shared utilities (.eyebrow, .section-line) from about.css.
 */

/* ─── Section shell ──────────────────────────────────────────────────────── */
.partners {
  position: relative;
  padding: 7rem 0;
  background: var(--bg-primary);
  scroll-margin-top: 90px; /* Offset for the fixed navigation bar when jumping to #partners. */
  overflow: hidden;
  transition: background 0.5s;
}

/* Dot-grid background texture — consistent with the other sections. */
.partners::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* ─── Header and grid container ──────────────────────────────────────────── */
/* Both share the same max-width, centering, and horizontal padding. The
   extra row (.partners-grid-extra) joins them so it lines up identically. */
.partners-head,
.partners-grid,
.partners-grid-extra {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 3rem;
}

/* Section eyebrow label — inherits base .eyebrow styles but is rendered
   at heading scale here to match the visual weight of other section titles. */
.partners-head .eyebrow {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  font-style: italic;
  letter-spacing: normal;
  text-transform: none;
}

.partners-title {
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--text-primary);
  margin-top: 1.25rem;
  transition: color 0.5s;
}
.partners-title .accent { color: var(--mhm-red); }

/* ─── Logo grid ──────────────────────────────────────────────────────────── */
.partners-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* ─── Third-row / partial-row tiles — centered, not grid-aligned ─────────── */
/* Flexbox + justify-content:center centers however many tiles are here
   (currently 2) as a group, rather than the grid's default behaviour of
   left-aligning a partial row into the first columns. Each tile's
   flex-basis mirrors the main grid's own column math (N equal columns,
   N-1 gaps of 1.25rem) at each breakpoint below, so tiles here are always
   the same size as tiles in the grid above. */
.partners-grid-extra {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
.partners-grid-extra .partner-tile {
  flex: 0 0 calc((100% - 3 * 1.25rem) / 4); /* matches repeat(4, 1fr) above */
}

/* ─── Individual partner tile ────────────────────────────────────────────── */
/* clip-path creates the folded top-right corner (notch effect).
   A box-shadow inset draws a 1 px border that follows the clip path,
   since a regular CSS border cannot follow a clipped edge. */
.partner-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 1.75rem;
  background: var(--card-bg);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  text-decoration: none;
  transition: box-shadow 0.35s; /* nothing animates the tile's own transform */
  /* Each tile paints independently: the first hover on a tile then only
     rasterises that tile (its clip-path, logo and circle layer), not its
     neighbours — this is what removed the "first pass across the grid
     stutters, later passes are smooth" warm-up. Safe because the tile
     already clips its own content (overflow:hidden + clip-path). */
  contain: layout paint;
}

/* Filled circle that expands from the centre of the tile on hover,
   revealing the partner URL text beneath the logo. */
.partner-tile::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--mhm-blue);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
  /* Own compositor layer: the tile's clip-path would otherwise force a
     full repaint of the tile on every frame the circle grows or shrinks —
     noticeable when sweeping quickly across many tiles at once. */
  will-change: transform;
}
.partner-tile:hover::before { transform: translate(-50%, -50%) scale(1); }

/* Partner logo — shrinks to zero on hover as the circle expands. */
.partner-logo {
  position: relative;
  z-index: 1;
  max-width: 80%;
  max-height: 48px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.35s, transform 0.35s;
  will-change: transform, opacity; /* see .partner-tile::before */
}
.partner-tile:hover .partner-logo { opacity: 0; transform: scale(0); }

/* Larger logo variant for partners whose mark requires more space.
   Currently unused (Commvault has its own class below) — kept in case a
   future partner logo needs the same treatment. */
.partner-logo.logo-lg { max-width: 130%; max-height: 70px; }

/* Commvault logo, given its own class so it can be sized independently —
   30% smaller than the old shared .logo-lg size (70px × 0.7 = 49px;
   130% × 0.7 = 91%). */
.partner-logo.logo-commvault { max-width: 91%; max-height: 49px; }

/* Broadcom logo, given its own class (rather than sharing .logo-lg) so it
   can be sized independently — 30% larger than the .logo-lg baseline
   (70px × 1.3 = 91px; 130% × 1.3 = 169%). Still capped by object-fit:contain
   and the tile's own padding, so it scales up without spilling out.
   To go to 50% instead: max-height: 105px; max-width: 195%. */
.partner-logo.logo-broadcom { max-width: 169%; max-height: 91px; }

/* Proxmox logo, enlarged 50% over the base .partner-logo size
   (48px × 1.5 = 72px). max-width raised too in case the replacement mark
   is wider than the old square icon (e.g. icon + wordmark side by side). */
.partner-logo.logo-proxmox { max-width: 120%; max-height: 72px; }

/* Partner URL text — hidden until hover reveals it above the expanded circle. */
.partner-name {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.75rem;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s 0.05s; /* Short delay so the circle is already visible when text fades in. */
  pointer-events: none;
  will-change: opacity; /* see .partner-tile::before */
}
.partner-tile:hover .partner-name { opacity: 1; }

/* ─── Responsive overrides ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .partners { padding: 4.5rem 0; }
  .partners-head,
  .partners-grid,
  .partners-grid-extra { padding-inline: 1.5rem; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  /* Extra row now mirrors a 2-column grid: 1 gap of 1.25rem instead of 3. */
  .partners-grid-extra .partner-tile { flex-basis: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 480px) {
  .partners-grid { grid-template-columns: 1fr; }
  /* One column left — stack the extra-row tiles too, full width each. */
  .partners-grid-extra { flex-direction: column; align-items: stretch; }
  .partners-grid-extra .partner-tile { flex-basis: auto; }
}

/* Reduce top/bottom padding on short-viewport screens (e.g. 1536×703 laptops)
   so section titles land comfortably below the nav after a nav-link click. */
@media (max-height: 750px) {
  .partners { padding-top: 4rem; padding-bottom: 4rem; }
}