/* ==========================================================================
   COMPONENT — .c-socials
   Four channel cards, each carrying its own platform colour.

   The site's palette is three hues and stays three hues; these are the ONE
   documented exception, because a social card that is not the platform's
   colour reads as decoration rather than as a link to that platform. The
   colour lives on each card's own custom property, so nothing leaks into the
   surrounding scheme.

   The cards are CENTRED and EQUAL WIDTH by construction: one grid, four equal
   tracks, everything stacked and centred inside. Nothing moves on hover — an
   earlier version lifted them, which made a row of four look like it was
   coming apart and, in the narrower About column, pushed them into the
   figures above.

   Used identically by the About section and the footer.
   WP Phase 2 target: template-parts/parts/socials.php
   ========================================================================== */

.c-socials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
}

/* The <li> has to stretch or the card inside it will size to its content and
   the four stop being equal. */
.c-socials > li { display: grid; }

.c-socials__card {
  --brand: var(--c-accent);
  --brand-ink: var(--stone-50);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 18%, transparent);
  color: var(--stone-300);
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* The brand colour arrives as a wash rather than a flat fill, so four
   saturated blocks never fight the editorial surface at rest. */
.c-socials__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--brand-wash, var(--brand));
  opacity: 0.13;
  transition: opacity var(--dur-base) var(--ease-out);
}

.c-socials__card:hover,
.c-socials__card:focus-visible {
  color: var(--stone-50);
  border-color: var(--brand);
}

.c-socials__card:hover::before,
.c-socials__card:focus-visible::before { opacity: 0.3; }

/* --- Glyph plate ---------------------------------------------------------- */

.c-socials__glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  background: var(--brand-wash, var(--brand));
  color: var(--brand-ink);
  transition: transform var(--dur-base) var(--ease-out);
}

.c-socials__card:hover .c-socials__glyph { transform: scale(1.08); }
.c-socials__glyph svg { inline-size: 1.25rem; block-size: auto; }

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

.c-socials__text {
  position: relative;
  z-index: 1;
  min-inline-size: 0;
  inline-size: 100%;
}

.c-socials__text small {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--slate-300);
  white-space: nowrap;
}

.c-socials__text b {
  display: block;
  margin-block-start: var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  color: var(--stone-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   PLATFORM COLOURS
   -------------------------------------------------------------------------- */

.c-socials__card--youtube   { --brand: #FF0000; --brand-wash: #FF0000; }
.c-socials__card--facebook  { --brand: #1877F2; --brand-wash: #1877F2; }

.c-socials__card--instagram {
  --brand: #DD2A7B;
  --brand-wash: linear-gradient(135deg, #F58529 0%, #DD2A7B 48%, #8134AF 76%, #515BD4 100%);
}

/* TikTok's own primary mark is the black one; the cyan/magenta version is a
   secondary treatment and sat oddly next to three solid brand colours. */
.c-socials__card--tiktok {
  --brand: #FFFFFF;
  --brand-wash: #0A0A0A;
  --brand-ink: #FFFFFF;
}

.c-socials__card--tiktok .c-socials__glyph {
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 30%, transparent);
}

@media (max-width: 78rem) {
  .c-socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
  .c-socials { grid-template-columns: minmax(0, 1fr); }
}