/*
 * patterns/logo-cloud.css — "Logo Cloud"
 * Markup: wp-content/themes/fcs/patterns/logo-cloud.php
 * Root:   .fcs-logo-cloud
 *
 * Figma 8033:10071 — Community & Giving › "Circle of Friends".
 *
 * Section padding is NOT declared here. The editor owns Medium/Large from the
 * Dimensions panel, and Small is pinned in layout/spacing.css. See CLAUDE.md
 * § "Section padding". The 1160px measure is likewise the block's own
 * constrained content width, not a rule here.
 *
 * RESPONSIVE (DERIVED; THE DESIGN IS DESKTOP ONLY)
 * ------------------------------------------------
 * There are no breakpoints in this file. The grid is core's grid layout with
 * BOTH a column count (6) and a minimum column width (140px). With both set,
 * core writes
 *
 *     repeat(auto-fill, minmax(max(140px, (100% - gaps) / 6), 1fr))
 *
 * so the count is a ceiling and the 140px a floor: 6 × 160px at the full
 * 1160px (exactly Figma), 5 across around 1024px, 4 at 768px and 2 on a phone.
 * The 40px gaps hold at every size. Two 140px+ logos side by side was judged
 * more readable on a phone than three cramped ones.
 *
 * WHY THE DOUBLED CLASSES
 * -----------------------
 * Core's global styles reach these elements at (0,1,0) through
 * `:root :where(...)`, both the flow layout's 24px child margin and the
 * caption element's 13px / 0.5em defaults, and they print AFTER the theme's
 * stylesheets, so a single-class rule here would tie and lose. Repeating the
 * class gives (0,2,0) without !important. This is the same idiom as
 * multicolumn.css.
 */

/* Heading → grid: 40px. */
.fcs-logo-cloud__heading.fcs-logo-cloud__heading {
  margin-block: 0 40px;
}

.fcs-logo-cloud__grid.fcs-logo-cloud__grid {
  margin-block: 0;
}

/* Logo + caption ------------------------------------------------------- */

.fcs-logo-cloud__logo.fcs-logo-cloud__logo {
  margin: 0;
}

/*
 * Every source file is 320 × 194 (a 2× export of Figma's 160 × 97 slot, with
 * the white padding baked in). The ratio is pinned and the image contained, so
 * a future logo exported at another size still sits in a same-height cell and
 * the captions stay level across the row.
 */
.fcs-logo-cloud__logo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 194;
  object-fit: contain;
}

/*
 * Figma: 12px under the logo, body font bold 14/20, link blue, centred.
 * Colour is the `link` preset (#0074c8), not hardcoded.
 */
.fcs-logo-cloud__logo.fcs-logo-cloud__logo .wp-element-caption {
  margin: 12px 0 0;
  color: var(--wp--preset--color--link);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}