/* ==========================================================================
   Social media

   The Carroll Group's last section inside <main>, rebuilt. Theirs is a Smash
   Balloon "Instagram Feed" embed: an avatar and bio header, one row of four
   square tiles, then a Load More button beside a Follow button.

   Their plugin stylesheet was never mirrored, so there is nothing to port.
   What follows is written from their measured geometry: 10px grid gap
   (data-item-padding 5, doubled), 1:1 tiles, a 50px avatar, and the
   asymmetric 200ms in / 500ms out hover their jQuery bound to each photo.

   Four deliberate departures, all client direction or defect repair:

   1. LEFT ALIGNED, like every section on this site. Theirs is centred.
   2. TOKENS, not the plugin's palette. Their follow button is the Smash
      Balloon default blue, an admin setting that matches nothing else on
      their page. Yaritza's palette is near monochrome, so the button is Ink.
   3. aspect-ratio, not a JS written pixel height. Their setImageHeight()
      measures each .sbi_photo and writes height in px, which means the row
      collapses to zero with the script blocked, goes stale on any width
      change that is not a window resize, and visibly reflows on first paint.
      One CSS line removes all three.
   4. FOUR COLUMNS TO TWO AT 900px, not their 480px. Their only breakpoint
      lives in getColumnCount(), and because cols and colstablet are both 4
      the whole 481px to 800px band renders four tiles about 165px wide. That
      is a bug in their config, not a design worth reproducing.
   ========================================================================== */

/* The ground is declared in the markup as .yp-sec-shell, the way every section
   on this page declares its own, so there is one source of truth for it. Shell
   rather than Sand because the footer below is Sand and this is the last
   section above it: Sand here would dissolve the boundary between the two. */

/* ---- profile -------------------------------------------------------------
   Their header is avatar, handle, bio in a row. Same structure, our type.
   align-items: flex-start rather than centre: the bio runs three lines here
   against their five, and centring a short block beside a 64px avatar leaves
   the handle floating above the avatar's midline. */

.yp-social-profile {
  margin: 0 0 clamp(28px, 3vw, 44px);
}

.yp-social-id {
  display: inline-flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 100%;
  color: var(--yp-ink);
  text-decoration: none;
}

/* Their avatar is a hard 50px against a 13px sans bio. Ours sits against the
   brand serif at 16px, which reads larger, so the mark grows with it to hold
   the same optical weight in the row. */
.yp-social-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--yp-sand);
}

.yp-social-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Their avatar hover drops an Instagram glyph over a dark scrim. Kept, on the
   Ink token rather than their black, so it sits in the same warm family as
   the rest of the page instead of going cold against the beige. */
.yp-social-avatar-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--yp-ink-rgb) / 0.62);
  color: var(--yp-white);
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-social-avatar-hover svg { width: 26px; height: 26px; }

.yp-social-id:hover .yp-social-avatar-hover,
.yp-social-id:focus-visible .yp-social-avatar-hover { opacity: 1; }

.yp-social-id-text {
  display: block;
  min-width: 0;
}

/* Caps, because every other label on this site is. A lowercase handle would
   be the one exception on the page and would read as an oversight. The name
   itself stays lowercase in the markup so the text stays a real handle. */
.yp-social-handle {
  display: block;
  margin: 0 0 0.34em;
  font-family: var(--yp-serif);
  font-weight: var(--yp-w-sub, 500);
  font-size: clamp(1rem, 0.35vw + 0.92rem, 1.25rem);
  line-height: 1.2;
  letter-spacing: var(--yp-track-sub, 0.09em);
  text-transform: uppercase;
}

/* Their bio is raw Instagram text: five lines of emoji, billings and a phone
   number, passed straight through by the plugin. Ours is written, not piped,
   and carries no emoji: the page has none anywhere else and four coloured
   glyphs on a monochrome ground would be the loudest thing in the section. */
.yp-social-bio {
  display: block;
  margin: 0;
  max-width: 44ch;
  color: rgb(var(--yp-ink-rgb) / 0.74);
  font-family: var(--yp-serif);
  font-size: clamp(0.875rem, 0.28vw + 0.8rem, 1rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
  text-transform: none;
}

.yp-social-id:hover .yp-social-handle {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---- grid ----------------------------------------------------------------
   minmax(0, 1fr) rather than 1fr: a grid track defaults to min-content, so an
   image that cannot shrink below its intrinsic width pushes the row wider than
   the container and the page scrolls sideways. The 0 minimum forbids that. */

.yp-social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yp-social-tile {
  min-width: 0;
  margin: 0;
}

.yp-social-shot {
  position: relative;
  display: block;
  overflow: hidden;
  /* Replaces their setImageHeight(); see the header note. */
  aspect-ratio: 1 / 1;
  background: var(--yp-sand);
  /* Their hover is jQuery fadeTo, asymmetric: 200ms down to 0.85, then 500ms
     back to 1 with .stop() so a re-entry interrupts the fade out. Two
     durations on the base and hover rules give the identical feel with no
     script and no inline opacity to fight. */
  transition: opacity 0.5s ease;
}

.yp-social-shot:hover { opacity: 0.85; transition: opacity 0.2s ease; }

.yp-social-shot:focus-visible {
  outline: 2px solid var(--yp-ink);
  outline-offset: 3px;
}

.yp-social-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content conditional, not chrome: this marks a carousel post the way their
   sbi_type_carousel class does. A single image post carries no glyph. */
.yp-social-multi {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 17px;
  height: 17px;
  color: var(--yp-white);
  /* The tiles are photographs, so the glyph has no guaranteed ground under it.
     A shadow rather than a plate keeps it legible over a bright sky without
     putting a box on the picture. */
  filter: drop-shadow(0 1px 3px rgb(var(--yp-ink-rgb) / 0.55));
  pointer-events: none;
}

/* ---- actions -------------------------------------------------------------
   Their row is a Load More button beside a Follow button. There is no feed
   plugin behind this build, so Load More is a link to the profile rather than
   a button that cannot load anything. If a real feed is wired up later, this
   becomes a <button> again and nothing else in the file changes. */

.yp-social-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
}

.yp-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  font-family: var(--yp-serif);
  font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.875rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--yp-track-nav, 0.18em);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cancels the trailing letter-space, which otherwise leaves the label sitting
   a couple of pixels left of centre inside its own box. Set on the label
   rather than the button because text-indent does nothing on a flex box. */
.yp-social-btn-label { margin-right: calc(-1 * var(--yp-track-nav, 0.18em)); }

.yp-social-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.yp-social-btn-ghost {
  color: var(--yp-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(var(--yp-ink-rgb) / 0.45);
}

.yp-social-btn-ghost:hover {
  background: var(--yp-sand);
}

/* Ink, not their plugin blue. See departure 2 in the header note. */
.yp-social-btn-solid {
  color: var(--yp-white);
  background: var(--yp-ink);
}

.yp-social-btn-solid:hover {
  background: rgb(var(--yp-ink-rgb) / 0.82);
}

.yp-social-btn:focus-visible {
  outline: 2px solid var(--yp-ink);
  outline-offset: 3px;
}

/* ---- reveal --------------------------------------------------------------
   The site contract, unchanged: the default is VISIBLE, sections.js adds
   .yp-anim only when it is actually running, and .yp-in plays it. Everything
   here is delay only; the transition and the resting state live in
   _shared.css so all eight sections move on the same curve.

   The four tiles are .yp-rise inside the grid, so their nth-child positions
   restart at 1 and _shared.css would hand them the same 0.30s to 0.60s the
   outer children already use. These push them past the profile block so the
   section builds top to bottom in one continuous 0.1s ladder rather than two
   overlapping ones. Specificity is deliberately one class higher than
   _shared.css so the order the two files load in cannot matter. */

.yp-social.yp-anim .yp-social-tile.yp-rise:nth-child(1) { transition-delay: 0.50s; }
.yp-social.yp-anim .yp-social-tile.yp-rise:nth-child(2) { transition-delay: 0.60s; }
.yp-social.yp-anim .yp-social-tile.yp-rise:nth-child(3) { transition-delay: 0.70s; }
.yp-social.yp-anim .yp-social-tile.yp-rise:nth-child(4) { transition-delay: 0.80s; }
.yp-social.yp-anim .yp-social-actions.yp-rise { transition-delay: 0.90s; }

/* ---- responsive ----------------------------------------------------------
   Two columns from 900px down. At 768px that gives roughly 340px tiles
   against the 165px their config produces, and four tiles still read as a
   complete grid because 4 divides by 2. Three columns would orphan one. */

@media (max-width: 900px) {
  .yp-social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 540, not 640: the same vertical the header, the hero and .yp-wrap change on,
   so nothing in this section steps out of line with the rest of the page. */
@media (max-width: 540px) {
  .yp-social-avatar { width: 52px; height: 52px; }
  .yp-social-id { gap: 14px; }
  /* Full width buttons below the point where both fit on one line: a wrapped
     pair of pill buttons at different widths reads as a mistake. */
  .yp-social-actions { flex-direction: column; align-items: stretch; }
  .yp-social-btn { justify-content: center; }
}

/* ---- reduced motion ------------------------------------------------------
   _shared.css already neutralises .yp-rise. These are the transitions this
   file adds on its own: the tile hover fade, the avatar scrim and the button
   colour change. */

@media (prefers-reduced-motion: reduce) {
  .yp-social-shot,
  .yp-social-avatar-hover,
  .yp-social-btn {
    transition: none;
  }
  .yp-social-shot:hover { transition: none; }
  .yp-social.yp-anim .yp-social-tile.yp-rise,
  .yp-social.yp-anim .yp-social-actions.yp-rise {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}