/**
 * Greenfield canonical: Content — Social (Instagram)
 * v3.54.40 — renamed from g-social to g-content-social in v3.54.42
 *
 * Wrapper chrome (root/-inner, header, eyebrow/heading/intro) follows the
 * SAME convention every other greenfield section uses (g-cta-inner /
 * g-content-posts-inner: max-width + auto margin + the shared section-
 * padding shape) — this section does not hand-roll its own outer padding
 * or max-width; the -inner wrapper is the single source of the site's real
 * content inset.
 *
 * The header/grid/empty-state/links rules below are the exact values
 * live-verified through several rounds of real debugging on
 * staging.decortoadore.com — not re-derived.
 */

.ssla-section.ssla-g-content-social {
  background-color: var(--ssla-bg-color, transparent);
  padding: var(--g-content-social-section-padding, 0);
}
.ssla-g-content-social-inner {
  max-width: var(--g-content-social-content-max-width, 1180px);
  margin: 0 auto;
  padding: var(--paint-section-padding, 80px) 48px;
}
.ssla-g-content-social-headtext { max-width: 640px; }

/* Header row — live-verified values, unchanged. */
.ssla-g-content-social-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.ssla-g-content-social-eyebrow {
  font: 600 12px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shell-accent, #6F8A5C);
}
.ssla-g-content-social-heading { font-family:var(--shell-font-family-heading,inherit); font-weight:500; font-size:2rem; line-height:1.1; color:var(--shell-text-dark,#1a1a1a); margin:0; }
/* NOTE: do NOT use var(--shell-h2-size) here — verified live that token
 * resolves to an oversized 56px suite-generic default nothing else on a
 * real site actually uses. Hardcoded to 2rem. */
.ssla-g-content-social-intro { margin:.4rem 0 0; font-size:.85rem; color:var(--shell-text-body,#4b5e71); max-width:46ch; }
.ssla-g-content-social-intro:empty { display:none; }
.ssla-g-content-social-follow {
  background:var(--shell-accent,#6F8A5C);
  color:#fff;
  padding:.7rem 1.4rem;
  border:1px solid transparent;
  font-size:.85rem;
  letter-spacing:.04em;
  text-decoration:none;
  display:inline-block;
  white-space:nowrap;
}

/* Grid — live-verified values, unchanged (auto default). */
.ssla-g-content-social-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); gap:6px; }
.ssla-g-content-social-shot { position:relative; overflow:hidden; cursor:pointer; background:var(--shell-surface-card,#F7F1EA); aspect-ratio:1/1; margin:0; display:block; }
.ssla-g-content-social-shot img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
.ssla-g-content-social-shot:hover img { transform:scale(1.06); }
.ssla-g-content-social-shot-cap { position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .8rem; color:#fff; font-size:.85rem; background:linear-gradient(to top, rgba(20,16,14,.72), transparent); opacity:0; transition:opacity .2s; }
.ssla-g-content-social-shot:hover .ssla-g-content-social-shot-cap { opacity:1; }
.ssla-g-content-social-shot-ig { position:absolute; top:.5rem; right:.5rem; width:22px; height:22px; color:#fff; opacity:0; transition:opacity .2s; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.ssla-g-content-social-shot:hover .ssla-g-content-social-shot-ig { opacity:.95; }

/* Columns structural variant — additive overrides only; the base auto-fill
 * rule above is untouched at the default. */
@media (min-width: 640px) {
  .ssla-g-content-social--columns-three .ssla-g-content-social-grid { grid-template-columns: repeat(3, 1fr); }
  .ssla-g-content-social--columns-four .ssla-g-content-social-grid { grid-template-columns: repeat(4, 1fr); }
  .ssla-g-content-social--columns-six .ssla-g-content-social-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Empty/unconnected state — live-verified values, unchanged. Same grid
 * chrome (placeholder tiles reuse .ssla-g-content-social-shot) + one centered
 * callout card. */
.ssla-g-content-social-empty { position:relative; }
.ssla-g-content-social-shot--placeholder { cursor:default; display:flex; align-items:center; justify-content:center; color:var(--shell-text-body,#4b5e71); opacity:.5; }
.ssla-g-content-social-shot--placeholder .ssla-g-content-social-shot-ig { position:static; opacity:1; width:28px; height:28px; filter:none; }
.ssla-g-content-social-cta {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--shell-surface-warm,#FDFCF8);
  border:1px solid var(--shell-hairline,rgba(21,32,43,.16));
  box-shadow:0 8px 24px rgba(21,32,43,.10);
  padding:22px 28px;
  text-align:center;
  max-width:min(88%, 360px);
}
.ssla-g-content-social-cta p { margin:0 0 .8rem; font-size:.9rem; color:var(--shell-text-body,#4b5e71); }
.ssla-g-content-social-cta p:last-child { margin-bottom:0; }

/* Social links row — live-verified values, unchanged. */
.ssla-g-content-social-links { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.2rem; }
.ssla-g-content-social-link { display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.2rem; border:1px solid var(--shell-hairline,rgba(21,32,43,.16)); background:var(--shell-surface-light,#fff); color:var(--shell-text-body,#4b5e71); font-size:.85rem; letter-spacing:.04em; text-decoration:none; transition:border-color .18s, color .18s; }
.ssla-g-content-social-link:hover { border-color:var(--shell-accent,#6F8A5C); color:var(--shell-accent,#6F8A5C); }

@media (max-width: 768px) {
  .ssla-g-content-social-inner { padding: 48px 24px; }
  .ssla-g-content-social-head { align-items:flex-start; }
}