/*
 * WHERE Guides widget styles (gc- namespace).
 * Same visual system as the Gear widgets: grey shell, white media panels,
 * accent eyebrows, quiet borders. Container queries, not media queries -
 * the widget adapts to ITS container (940 / 700 / 440), so it works
 * full-width and in a half-width column without separate settings.
 */

.gc-widget {
	--gc-accent: #3a759f;
	--gc-ink: #262827;
	--gc-muted: #6d726f;
	--gc-line: #dfe5e1;
	--gc-shell: #f2f4f1;
	--gc-radius: 12px;
	--gc-gutter: clamp(18px, 3vw, 32px);
	/* One mini-card row (card + grid gap). The Contents clamp is a
	   max-height in row units so "1.5 rows" reads as a visible half row. */
	--gc-minicard-row: 148px;
	container-type: inline-size;
	overflow: visible;
	padding: var(--gc-gutter);
	border: 1px solid var(--gc-line);
	border-radius: 16px;
	background: var(--gc-shell);
	color: var(--gc-ink);
	font-family: inherit;
	line-height: 1.45;
}
.gc-widget *,
.gc-widget *::before,
.gc-widget *::after { box-sizing: border-box; }

/* Head ------------------------------------------------------------------ */
.gc-head { margin: 0 0 18px; }
.gc-eyebrow { display: block; margin: 0 0 6px; color: var(--gc-accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gc-heading { margin: 0; font-size: clamp(20px, 2.6cqi + 14px, 30px); line-height: 1.15; }
.gc-copy { margin: 8px 0 0; max-width: 62ch; color: var(--gc-muted); font-size: 14px; }

/* Shared media panel ----------------------------------------------------- */
.gc-media-shell { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #fff; }
.gc-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.gc-no-image { display: block; width: 62%; height: 62%; margin: auto; border-radius: 8px; background: linear-gradient(135deg, #f7f8f6, #e6eae6); }

.gc-guides { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Standard cards + Contents guide head ----------------------------------- */
.gc-card,
.gc-guide,
.gc-featured { overflow: hidden; border: 1px solid var(--gc-line); border-radius: var(--gc-radius); background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.gc-card:hover,
.gc-guide:hover,
.gc-featured:hover { border-color: #c7d0ca; box-shadow: 0 12px 28px rgba(30, 45, 38, .10); }

.gc-card-link,
.gc-guide-head { display: grid; grid-template-columns: 148px minmax(0, 1fr); min-height: 128px; color: inherit; text-decoration: none !important; }
.gc-card-media { position: relative; min-height: 128px; background: #fff; }
.gc-card-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 16px 18px; }
.gc-type { display: block; color: var(--gc-accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gc-title { margin: 4px 0 0; color: var(--gc-ink); font-size: 17px; font-weight: 800; line-height: 1.25; }
.gc-summary { display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: var(--gc-muted); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gc-guide-head { border-bottom: 1px solid var(--gc-line); }

/* Featured - magazine callout -------------------------------------------- */
.gc-featured-link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); color: inherit; text-decoration: none !important; }
.gc-featured-media { position: relative; min-height: 260px; background: #fff; }
.gc-featured-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 24px 26px; }
.gc-featured-title { font-size: clamp(19px, 2cqi + 14px, 26px); }
.gc-featured-summary { -webkit-line-clamp: 3; font-size: 14px; }
.gc-stats { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--gc-line); list-style: none; }
.gc-stat { min-width: 0; }
.gc-stat-label { display: block; color: var(--gc-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gc-stat-value { display: block; margin-top: 1px; font-size: 13px; font-weight: 700; }
.gc-view-button { display: inline-flex; align-items: center; align-self: flex-start; min-height: 40px; margin-top: 16px; padding: 9px 18px; border-radius: 8px; background: var(--gc-accent); color: #fff; font-size: 13px; font-weight: 700; }

/* Contents mode ----------------------------------------------------------- */
/* Clamp: exactly 1.5 rows of mini-cards by default. The cut-off half row
   plus the fade IS the affordance that more exists. max-height in row
   units; expansion is a class/data-attribute toggle only (guide-cards.js). */
.gc-contents { position: relative; overflow: hidden; max-height: calc(1.5 * var(--gc-minicard-row)); padding: 14px 14px 0; }
.gc-contents[data-gc-level="1"] { max-height: calc(3.5 * var(--gc-minicard-row)); }
.gc-contents[data-gc-level="2"] { max-height: calc(5.5 * var(--gc-minicard-row)); }
.gc-contents[data-gc-level="3"] { max-height: calc(7.5 * var(--gc-minicard-row)); }
.gc-guide.gc-show-all .gc-contents { max-height: none; }

.gc-minigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gc-mini { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gc-line); border-radius: 10px; background: #fff; color: inherit; text-decoration: none !important; transition: border-color .15s ease; }
.gc-mini:hover { border-color: var(--gc-accent); }
.gc-mini-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; }
.gc-mini-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gc-mini-body { display: block; min-width: 0; padding: 8px 10px 10px; }
.gc-mini-type { display: block; color: var(--gc-accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gc-mini-title { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.3; }

/* Fade over the clipped half row. */
.gc-fade { position: absolute; right: 0; bottom: 0; left: 0; height: 56px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 78%); pointer-events: none; }
.gc-guide.gc-show-all .gc-fade,
.gc-guide:not(.gc-has-more) .gc-fade { display: none; }

/* Disclosure: collapsed shows "+ more"; expanded swaps to
   [ - less | show all | more + ]. Visibility is pure CSS off the state
   classes set by guide-cards.js. */
.gc-disclosure { display: flex; justify-content: center; padding: 10px 14px 14px; }
.gc-disclosure-btn { min-height: 38px; padding: 8px 15px; border: 1px solid var(--gc-line); border-radius: 8px; background: #fff; color: var(--gc-ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.gc-disclosure-btn:hover { border-color: var(--gc-accent); color: var(--gc-accent); }
.gc-disclosure-expanded { display: none; gap: 8px; }
.gc-guide.gc-expanded .gc-disclosure-collapsed { display: none; }
.gc-guide.gc-expanded .gc-disclosure-expanded { display: inline-flex; }
.gc-guide:not(.gc-has-more):not(.gc-expanded) .gc-disclosure { display: none; }
.gc-guide.gc-show-all [data-gc-action="more"] { display: none; }
.gc-guide.gc-expanded:not(.gc-has-more):not(.gc-show-all) [data-gc-action="more"] { display: none; }

/* Editor notices ---------------------------------------------------------- */
.gc-empty { padding: 14px 16px; border: 1px dashed var(--gc-line); border-radius: 10px; margin: 0 0 12px; background: #fff; color: var(--gc-muted); font-size: 13px; }

/* Focus ------------------------------------------------------------------- */
.gc-card-link:focus-visible,
.gc-guide-head:focus-visible,
.gc-featured-link:focus-visible,
.gc-mini:focus-visible,
.gc-disclosure-btn:focus-visible { outline: 3px solid #83b9dc; outline-offset: 3px; }

/* Container queries ------------------------------------------------------- */
@container (min-width: 700px) {
	.gc-mode-standard .gc-guides { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

@container (max-width: 940px) {
	.gc-featured-link { grid-template-columns: 1fr; }
	.gc-featured-media { min-height: 200px; aspect-ratio: 16 / 9; }
}

@container (max-width: 700px) {
	.gc-minigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gc-card-link,
	.gc-guide-head { grid-template-columns: 112px minmax(0, 1fr); min-height: 104px; }
	.gc-summary { -webkit-line-clamp: 2; }
}

@container (max-width: 440px) {
	.gc-widget { --gc-gutter: 16px; --gc-minicard-row: 100px; border-radius: 12px; }
	.gc-minigrid { grid-template-columns: 1fr; }
	.gc-mini { flex-direction: row; align-items: center; }
	.gc-mini-media { flex: 0 0 auto; width: 84px; aspect-ratio: 1 / 1; }
	.gc-summary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-card,
	.gc-guide,
	.gc-featured,
	.gc-mini { transition: none; }
}