/* ==========================================================================
   custom.css — site-specific overrides.

   Keep ALL local styling changes in this file and never edit main.css.
   main.css is the unmodified Hyperbolic stylesheet; leaving it pristine means
   a future theme update can be dropped in without hunting for local edits.

   This file loads after main.css (see _includes/head.html), so anything here
   wins on equal specificity.

   The aim is to stay as close to the stock theme as possible. There is
   currently one override, explained below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Spotlight images: force a square crop so the theme's circles are circles.

   Hyperbolic styles spotlight images with `border-radius: 100%` and assumes a
   SQUARE source image. The work images here are 1440x900 landscape, so the
   circular mask stretched them into ovals.

   Rather than abandon the theme's circular design, this crops each image to a
   1:1 box and lets `object-fit: cover` fill it from the centre — which is what
   a square source would have produced. The theme's own sizing, shadow, mask
   and alternating left/right layout are all untouched.
   -------------------------------------------------------------------------- */

.spotlights section .image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* object-position defaults to centre; adjust per-image here if a particular
	   crop cuts off something important, e.g.
	   .spotlights section:nth-child(3) .image img { object-position: center 30%; } */
}

/* --------------------------------------------------------------------------
   Spotlight spacing.

   The theme sets `margin-top: -3rem` on each spotlight so adjacent circles
   interlock slightly. That is tuned for the demo's one-line blurbs; the copy
   here runs to a full paragraph per item, so the same negative margin leaves
   the rows looking cramped against each other.

   Replaced with positive separation. This is a deliberate, minimal departure
   from stock: everything else about the component - the circles, sizing,
   shadow and the alternating left/right rhythm - is untouched.
   -------------------------------------------------------------------------- */

.spotlights section {
	margin-top: 5rem;
}

	/* No leading gap on the first one; it already sits below the section header. */
	.spotlights section:first-child {
		margin-top: 0;
	}

@media screen and (max-width: 980px) {

	/* Stacked layout: image above copy, so the rows need less separation. */
	.spotlights section {
		margin-top: 4rem;
	}

}