/**
 * @file views-partnerid.css
 * Partnerid (partner logos) block: a single row of logos, each capped to
 * a consistent height and left uncropped (object-fit: contain) since
 * logos vary wildly in aspect ratio and shouldn't be cropped like photos.
 */

/*
 * Block title exception: same size as body text (1.125rem) instead of the
 * site-wide block-heading scale, but bolder (600 vs 400) to still read as
 * a heading. The thin rule sits directly under the title (between title
 * and logos), not above it - padding-bottom gives space between the text
 * and its own line, margin-bottom gives space between the line and the
 * logo row below.
 */
.block-heading--views-blockpartnerid-block-1 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 1.6875rem;
  font-weight: 600;
}

/*
 * Generous top/bottom padding for breathing room, plus a matching thin
 * light gray rule below the logo row (the title's own border-bottom
 * above provides the upper rule, so this wrapper only needs the lower
 * one). :has() scopes this to just the Partnerid block's own wrapper,
 * since .views-element-container is a generic Views wrapper used on
 * other blocks too.
 */
.views-element-container:has(.block-heading--views-blockpartnerid-block-1) {
  padding-block: 2.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/*
 * Centered rather than space-between: space-between stretched each row's
 * items to the far edges with equal gaps computed automatically, which
 * looked fine with a full row but left an awkward, very wide gap on any
 * incomplete row (a wrapped 2-of-3, or a lone last logo) - found
 * 2026-09-23 once enough real logos existed to actually wrap to more than
 * one row. Centering groups whatever's in each row together instead, so
 * an incomplete row just looks like a shorter centered row, not a
 * stretched one with a gap. Needs its own explicit gap now, since
 * center (unlike space-between) doesn't compute spacing on its own.
 */
.view-id-partnerid .view-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 2.75rem; /* column-gap ~8% smaller (was 3rem) - see logo img comment below */
}

.view-id-partnerid .views-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * Fluid size instead of a fixed one or discrete breakpoint steps - same
 * technique murg.ee uses for their own partner-logo row (checked
 * 2026-09-23: their .col + img-fluid setup scales logos continuously with
 * viewport width, no jumps). clamp(min, preferred, max) does the same
 * thing here: 51px (roughly the ~15% smaller size tried for mobile) at
 * ~375px viewport width, scaling smoothly up to 55px (~8% smaller than
 * the original 60px - trimmed again 2026-09-23, so a 9th logo has a
 * better chance of joining the first 8 on one row at very wide desktop
 * widths, rather than sitting alone on its own row) by ~1280px (this
 * site's own max content width), flat outside that range. Not a
 * guarantee every future logo added still fits one row at any width -
 * that gets fragile to keep re-tuning as more partners are added: this
 * just makes the current 9 fit more often, on the more common wide-
 * desktop sizes, and still wraps gracefully (see the centering comment
 * above) whenever it doesn't. Unlike murg.ee's row, flex-wrap stays on
 * (see .view-content above) - several of these logos have their own text
 * baked in (Estonian Endurance Riding, Nurga Puukool), which would go
 * illegible squeezed into one never-wrapping row on a phone the way
 * murg.ee's simpler marks can.
 */
.view-id-partnerid .views-field-field-logo img {
  display: block;
  max-height: clamp(51px, 49px + 0.5vw, 55px);
  width: auto;
  object-fit: contain;
}

/*
 * Logos with a website link (field_partner_link) render wrapped in an <a>
 * (see views.view.partnerid field_logo rewrite) - reset it to a plain
 * inline wrapper so it doesn't add its own underline/color to the image.
 */
.view-id-partnerid .views-field-field-logo a {
  display: block;
  line-height: 0;
  text-decoration: none;
}