/*
 * instagram.css — section 10, Recent From Instagram.
 * Contents: 1 shell · 2 heading · 3 the post carousel · 4 narrow screens.
 *
 * Loaded by inc/assets.php as "synergi-section-instagram", only on pages that
 * declare the section. Markup: sections/instagram.php.
 * Behaviour: assets/js/sections/instagram.js.
 *
 * THIS FILE USED TO CARRY THE THEME'S ONLY OVERRIDE LAYER, and no longer does
 * (3 Sep). Its section 3 reached into the feed plugin's markup (#sb_instagram
 * and its sbi_* classes) to make a third party's grid sit inside our page,
 * carrying three !important declarations to beat styles the plugin printed
 * inline. The band now renders its own cards from the posts the plugin has
 * already cached — see inc/instagram.php for why that is legitimate — so every
 * one of those selectors is gone, and with them the last of the "styling markup
 * we did not write" that CLAUDE.md §4 warns about.
 *
 * The plugin's shortcode is still the fallback when the cache cannot be read,
 * and it is deliberately left unstyled: an emergency path should render the
 * plugin's own working grid rather than a half-matched one.
 *
 * Class map, design source -> theme:
 *   .syg-social-section -> .syn-instagram    .syg-social-heading -> __heading
 *   .syg-social-heading-copy -> __heading-copy
 *   .syg-social-feed -> __feed (the fallback wrapper only)
 *   .button.button-outline -> .syn-button.syn-button--outline (base.css)
 *
 * Colours are derived from the §3 palette with color-mix(); the source writes
 * this section's one shadow in rgba and its focus ring as a raw hex, which is
 * dropped in favour of the theme's focus token (CLAUDE.md §9).
 */

/* ==========================================================================
   1. Shell
   ========================================================================== */

.syn-instagram {
	background-color: var(--syn-paper);
}

/* ==========================================================================
   2. Heading
   Title on one side, follow button on the other, sitting on the same baseline.
   ========================================================================== */

.syn-instagram__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-block-end: clamp(1.6rem, 3vw, 2.4rem);
}

/* Groups the eyebrow and the heading as one flex child, and lets a long heading
   shrink rather than pushing the follow button off the row. */
.syn-instagram__heading-copy {
	min-inline-size: 0;
}

.syn-instagram__title {
	margin-block: 0.55rem 0;
	margin-inline: 0;
	color: var(--syn-navy);
}

.syn-instagram__follow {
	flex-shrink: 0;
}

/* ==========================================================================
   3. The post carousel
   The blog band's carousel in this section's names, so the three rows on the
   Media hub behave alike. Gated on scripting because only instagram.js can
   move the track: with JavaScript off the first three posts render as a plain
   grid and no arrows appear.
   ========================================================================== */

.syn-instagram {
	/* One number for how many cards are on screen, matching the blog band's. */
	--syn-instagram-per-view: 3;
	--syn-instagram-gap: clamp(1rem, 2vw, 1.75rem);
}

.syn-instagram__track {
	display: grid;
	grid-template-columns: repeat(var(--syn-instagram-per-view), minmax(0, 1fr));
	gap: var(--syn-instagram-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One full row with no script: the spare posts the carousel would page with
   would otherwise drop onto a ragged second row. */
.syn-instagram__item:nth-child(n + 4) {
	display: none;
}

.syn-instagram__control {
	display: none;
}

/*
 * The fallback wrapper, holding the plugin's shortcode on the rare path where
 * the cache cannot be read. The only rule it gets: reserve the band's height
 * while the plugin's own script hydrates its grid, so the page below does not
 * jump when the pictures arrive. Nothing inside it is styled — see the note at
 * the top of this file.
 */
.syn-instagram__feed {
	min-block-size: clamp(9rem, 18vw, 15rem);
}

/*
 * The card: the picture, then its caption underneath — the shape the band had
 * before it became our own carousel, restored 3 Sep on request.
 *
 * A column, so every card in a row is the same height whatever its caption
 * does, and the pictures all line up along the top.
 */
.syn-instagram__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	border-radius: 0.65rem;
	background-color: var(--syn-white);
	box-shadow: 0 14px 34px color-mix(in srgb, var(--syn-ink) 9%, transparent);
	text-decoration: none;
	transition:
		transform var(--syn-duration) var(--syn-ease-out),
		box-shadow var(--syn-duration) var(--syn-ease-out);
}

@media (hover: hover) {

	.syn-instagram__link:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 40px color-mix(in srgb, var(--syn-ink) 10%, transparent);
	}
}

/*
 * 4:5, the portrait shape Instagram publishes at and the one the feed plugin
 * was set to. Fixing it here rather than letting each picture set its own is
 * what keeps three cards in a row the same height.
 */
.syn-instagram__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--syn-paper-blue);
}

.syn-instagram__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

.syn-instagram__link:hover .syn-instagram__image,
.syn-instagram__link:focus-visible .syn-instagram__image {
	transform: scale(1.04);
}

/*
 * The caption's padding lives on this wrapper, not on the clamped span itself.
 * `-webkit-line-clamp` sizes the content box to three lines but `overflow`
 * clips at the PADDING box, so a padded clamped element lets the fourth line
 * bleed into its own bottom padding and get sliced through the middle — which
 * is exactly what the band was doing (reported 4 Sep). With the padding out
 * here the clip lands on the third line's baseline, where the ellipsis is.
 */
.syn-instagram__body {
	padding: var(--syn-space-3);
}

/*
 * The caption. Clamped to three lines: a post's first sentence is the useful
 * part, and an unclamped caption would set one card's height for the whole row.
 */
.syn-instagram__caption {
	display: -webkit-box;
	overflow: hidden;
	color: var(--syn-text-soft);
	font-size: var(--syn-step--1);
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

@media (scripting: enabled) {

	.syn-instagram__carousel {
		display: grid;
		grid-template-areas: "prev viewport next";
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: clamp(0.5rem, 1.5vw, 1.1rem);
	}

	.syn-instagram__viewport {
		grid-area: viewport;
		overflow: hidden;
		/* Negative margin then equal padding: a card lifted on hover has room
		   to lift into, and its shadow is not clipped by the overflow. */
		margin-block: -0.85rem -1.6rem;
		padding-block: 0.85rem 1.6rem;
		cursor: grab;
		/* Vertical scrolling stays with the page; horizontal is the drag's. */
		touch-action: pan-y;
		user-select: none;
	}

	.syn-instagram__viewport.syn-is-dragging {
		cursor: grabbing;
	}

	.syn-instagram__track {
		display: flex;
		gap: var(--syn-instagram-gap);
		will-change: transform;
	}

	/* Every post returns: the ones hidden above are exactly what the carousel
	   pages with. Three classes deep so this outranks the nth-child rule at
	   every width. */
	.syn-instagram__carousel .syn-instagram__track .syn-instagram__item {
		display: block;
		flex: 0 0 calc((100% - ((var(--syn-instagram-per-view) - 1) * var(--syn-instagram-gap))) / var(--syn-instagram-per-view));
	}

	.syn-instagram__control {
		display: inline-grid;
		inline-size: 3rem;
		block-size: 3rem;
		padding: 0;
		place-items: center;
		border: 1px solid var(--syn-border);
		border-radius: 0.45rem;
		background-color: var(--syn-white);
		color: var(--syn-navy);
		cursor: pointer;
		transition:
			color var(--syn-duration-fast),
			border-color var(--syn-duration-fast),
			background-color var(--syn-duration-fast),
			transform var(--syn-duration-fast);
	}

	.syn-instagram__control--prev {
		grid-area: prev;
	}

	.syn-instagram__control--next {
		grid-area: next;
	}

	.syn-instagram__control svg {
		inline-size: 1.35rem;
		block-size: 1.35rem;
		fill: none;
		stroke: currentcolor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.8;
	}

	.syn-instagram__control:hover:not(:disabled) {
		border-color: var(--syn-navy);
		background-color: var(--syn-navy);
		color: var(--syn-white);
		transform: translateY(-2px);
	}

	.syn-instagram__control:disabled {
		opacity: 0.35;
		cursor: default;
	}

	/* Every post already fits, so there is nothing to page and the arrows would
	   be lying. instagram.js sets this class. */
	.syn-instagram__carousel.syn-is-static .syn-instagram__control {
		display: none;
	}
}

/* ==========================================================================
   4. Narrow screens
   One number changes the count, as in the blog band.
   ========================================================================== */

@media (max-width: 61.25rem) {

	.syn-instagram {
		--syn-instagram-per-view: 2;
	}

	.syn-instagram__item:nth-child(n + 3) {
		display: none;
	}
}

@media (max-width: 47.99rem) {

	.syn-instagram {
		--syn-instagram-per-view: 1;
	}

	.syn-instagram__heading {
		display: block;
	}

	.syn-instagram__follow {
		margin-block-start: 1.1rem;
	}
}

@media (scripting: enabled) and (max-width: 47.99rem) {

	/* The arrows move under the cards, centred, where a thumb can reach them. */
	.syn-instagram__carousel {
		grid-template-areas:
			"viewport viewport viewport viewport"
			". prev next .";
		grid-template-columns: 1fr auto auto 1fr;
		column-gap: 0.6rem;
		row-gap: clamp(1.1rem, 2vw, 1.5rem);
	}

	.syn-instagram__control {
		inline-size: 2.75rem;
		block-size: 2.75rem;
	}
}