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

  /* Sized to their contents, not to the column.
     `fit-content` plus `1fr` tracks is the whole trick: inside a shrink-wrap
     container the flexible tracks resolve against the widest item's
     max-content, so all four come out equal to the widest — "Aleksandar
     Vasilevski" — and the grid is only as wide as that needs. Stretched to
     the full column they were four wide boxes each holding a glyph and two
     short lines, which is a lot of border around not much. */
  inline-size: fit-content;
  max-inline-size: 100%;
}

/* 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-4) var(--sp-3);
  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)); }
}

/* No single-column step. Four cards stacked was four wide bands down the
   page for four links; two-by-two keeps them reading as a set and keeps the
   section short. They hold their shape down to the narrowest phone because
   the card's own content — a glyph and two short mono lines — is narrow. */
@media (max-width: 30rem) {
  .c-socials { gap: var(--sp-3); }
  .c-socials__card { padding: var(--sp-4) var(--sp-3); }
}


/* ==========================================================================
   COMPACT — the row under the email address in the contact section

   Four cards in a 450px column. The handle has to go: "Aleksandar Vasilevski"
   is 150px of nowrapped type on its own and the whole card gets 103px. What
   is left is the platform's mark and its name, which is all a link to a
   profile has ever needed to say. The full cards, handles included, are still
   in the About section, where there is room for them.

   Sized to the column rather than to its own content, unlike the full set:
   here the point is that the four of them span the address above, so they
   read as one block with it.
   ========================================================================== */

.c-socials--compact {
  /* Full width of the column, not shrink-wrapped like the About set.

     `justify-self` as well as `inline-size`: on a phone the contact intro is
     a grid with `justify-items: center`, which shrank the row to its own
     content and left four small cards huddled in the middle of a wide
     column. The point of these is that they span the address above them. */
  inline-size: auto;
  justify-self: stretch;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
}

.c-socials--compact .c-socials__card {
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
}

.c-socials--compact .c-socials__glyph {
  inline-size: 2rem;
  block-size: 2rem;
}

.c-socials--compact .c-socials__glyph svg { inline-size: 0.95rem; }

.c-socials--compact .c-socials__text b { display: none; }

.c-socials--compact .c-socials__text small {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

/* Two by two once the column is too narrow for four. On a phone the contact
   intro is the full width and 88px a card is not enough for "INSTAGRAM". */
@media (max-width: 62rem) {
  .c-socials--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}