/* ==========================================================================
   guides.css - Shared structural styles for guide listing and detail pages
   Loaded via extra_css in guides.cgi

   RESPONSIBILITY SPLIT:
     guides.css    layout, sizing, spacing, float/flex structure,
                   positioning, breakpoints, clearfixes, font-size,
                   line-height, transitions.
     site CSS      colours, backgrounds, gradients, shadows, borders,
                   border-radius, font colours, brand decoration.

   SECTIONS:
     1.  Guide detail: container
     2.  Guide detail: header & meta card
     3.  Guide detail: body typography
     4.  Guide detail: image float (.guide-image)
     5.  Guide detail: callout blocks
     6.  Guide index/listing: container & grid
     7.  Guide index/listing: card
     8.  Inline guide images (guides_img_* from scratchpad editor)
     9.  Full-size image popup overlay
   ==========================================================================

   NOTE on border-radius:
     wetyourwhistle uses 18px (cards) / 14px (mobile) / 12px (images)
     gadgets        uses 16px (meta card) / 10px (images)
   These are kept in each site's CSS.

   NOTE on guide detail container:
     wetyourwhistle wraps content in a styled card (background, border,
     shadow, border-radius). gadgets uses a plain max-width container.
     The shared max-width/padding lives here; card decoration in site CSS.
   ========================================================================== */


/* ==========================================================================
   1.  Guide detail: container
   ========================================================================== */

.ms-guide,
.wyw-guide,
.guide-page article {
	max-width: 840px;
	margin: 1.5rem auto 2.5rem;
	padding: 1.4rem 1.25rem 1.8rem;
}

/* gadgets uses a wider, edge-to-edge container without card styling */
.guide {
	max-width: 1120px;
	margin: 0 auto 2.5rem;
	padding: 0 1.25rem;
}

@media (max-width: 640px) {
	.ms-guide,
	.wyw-guide,
	.guide-page article {
		margin: 1rem 0.75rem 1.6rem;
		padding: 1rem 0.95rem 1.2rem;
	}
}


/* ==========================================================================
   2.  Guide detail: header & meta card
   ========================================================================== */

.guide-header {
	margin-top: 2rem;
	margin-bottom: 1.75rem;
}

/* Breadcrumbs - scoped to guide containers only */
.ms-guide .breadcrumbs,
.guide-page .breadcrumbs,
.ms-guide__breadcrumbs {
	margin: 0 0 0.9rem;
	font-size: 0.92rem;
	line-height: 1.4;
}

.ms-guide .breadcrumbs a,
.guide-page .breadcrumbs a,
.ms-guide__breadcrumbs a {
	text-decoration: none;
}

.ms-guide .breadcrumbs a:hover,
.guide-page .breadcrumbs a:hover,
.ms-guide__breadcrumbs a:hover {
	text-decoration: underline;
}

/* Meta/tags card (used by gadgets; wyw uses inline meta line) */
.guide-meta-card {
	display: block;
	margin: 0 0 1rem 0;
	padding: 0.6rem 0.9rem;
	font-size: 0.82rem;
}

.guide-meta-card .guide-meta,
.guide-meta-card .guide-tags {
	margin: 0;
}

.guide-meta-card .guide-tags {
	margin-top: 0.2rem;
}

/* Meta line: category / date / word count / read time */
.guide-meta,
.ms-guide__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	align-items: center;
	margin: 0 0 0.8rem;
	font-size: 0.94rem;
}

/* Detail page H1 */
.ms-guide h1,
.guide-page h1 {
	margin: 0 0 0.9rem;
	font-size: clamp(1.5rem, 4vw, 2.0rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* .guide-title on the detail page header (gadgets uses this as an H1-level title) */
.guide-header .guide-title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Intro / standfirst — scoped to guide detail containers */
.ms-guide__intro,
.guide-standfirst,
.ms-guide .guide-summary,
.guide-page .guide-summary {
	margin: 0 0 1.3rem;
	font-size: 1.05rem;
	line-height: 1.75;
}

/* Summary text on guide list items — smaller, tighter */
.guide-item .guide-summary {
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0;
}

@media (max-width: 640px) {
	.ms-guide h1,
	.guide-page h1 {
		font-size: 1.75rem;
	}
}


/* ==========================================================================
   3.  Guide detail: body typography
   ========================================================================== */

.guide-body {
	font-size: 0.96rem;
	line-height: 1.7;
}

/* Clearfix after floated images */
.guide-body::after {
	content: "";
	display: table;
	clear: both;
}

/* Body copy */
.ms-guide p,
.guide-page p,
.guide-body p {
	margin: 0 0 1rem;
	line-height: 1.82;
}

/* Section headings */
.ms-guide h2,
.guide-page h2,
.guide-body h2 {
	margin: 1.8rem 0 0.7rem;
	padding-top: 0.2rem;
	line-height: 1.25;
	position: relative;
}

.guide-body h3,
.guide-body h4 {
	margin: 1.3rem 0 0.5rem 0;
	font-weight: 600;
}

/* Accent line beneath h2 — structural base only.
   Width and background supplied by site CSS
   (wyw: 56px orange dash; gadgets: not used). */
.ms-guide h2::after,
.guide-page h2::after {
	content: "";
	display: block;
	height: 3px;
	margin-top: 0.45rem;
	border-radius: 999px;
}

/* Lists */
.ms-guide ul,
.guide-page ul {
	margin: 1rem 0 1.2rem;
	padding: 1rem 1rem 1rem 1.2rem;
}

.ms-guide li,
.guide-page li,
.guide-body li {
	margin: 0.45rem 0;
	line-height: 1.7;
}

/* In-article links */
.ms-guide a,
.guide-page a,
.guide-body a {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

@media (max-width: 640px) {
	.ms-guide p,
	.guide-page p {
		line-height: 1.75;
	}

	.ms-guide h2,
	.guide-page h2,
	.guide-body h2 {
		font-size: 1.24rem;
	}
}


/* ==========================================================================
   4.  Guide detail: image float (.guide-image)
   Used by gadgets; wyw uses the .guides_img_* scratchpad system (section 8).
   ========================================================================== */

.guide-image {
	float: right;
	max-width: 45%;
	margin: 0 0 1.2em 1.2em;
}

.guide-image img {
	display: block;
	max-height: 300px;
	width: auto;
	max-width: 100%;
}

.guide-image figcaption {
	font-size: 0.85em;
	margin-top: 0.4em;
	line-height: 1.3;
}

/* Clear floats after each figure */
.guide-image::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 768px) {
	.guide-image {
		float: none;
		max-width: 100%;
		margin: 1em 0;
	}

	.guide-image img {
		max-height: 240px;
		margin: 0 auto;
	}
}


/* ==========================================================================
   5.  Guide detail: callout blocks
   Site CSS supplies: background, border-left colour, text colour,
   border-radius.
   ========================================================================== */

.guide-note,
.guide-disclaimer,
article .note {
	margin-top: 1.5rem;
	padding: 0.95rem 1rem;
	font-size: 0.95rem;
	line-height: 1.65;
}


/* ==========================================================================
   6.  Guide index/listing: container & grid
   ========================================================================== */

.guides-index,
.ms-guides,
.wyw-guides,
main .guides-page {
	max-width: 980px;
	margin: 1.5rem auto 2.5rem;
	padding: 0 1rem;
}

/* Breadcrumbs on index */
.guides-index .breadcrumbs,
.ms-guides__breadcrumbs {
	margin: 0 0 0.9rem;
	font-size: 0.92rem;
	line-height: 1.4;
}

.guides-index .breadcrumbs a,
.ms-guides__breadcrumbs a {
	text-decoration: none;
}

.guides-index .breadcrumbs a:hover,
.ms-guides__breadcrumbs a:hover {
	text-decoration: underline;
}

/* Page title */
.guides-index h1,
.ms-guides h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

/* Optional intro paragraph */
.guides-index__intro,
.ms-guides__intro,
.guides-intro {
	max-width: 760px;
	margin: 0 0 1.4rem;
	font-size: 1.05rem;
	line-height: 1.75;
}

/* Guide card grid */
.guides-index__list,
.ms-guides__list {
	display: grid;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

/* Links inside index */
.guides-index a,
.ms-guides a {
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

@media (max-width: 640px) {
	.guides-index,
	.ms-guides,
	.wyw-guides,
	main .guides-page {
		margin: 1rem auto 1.75rem;
		padding: 0 0.75rem;
	}
}


/* ==========================================================================
   7.  Guide index/listing: card
   Site CSS supplies: background, border, shadow, border-radius,
   hover border-colour, hover shadow, link colours.
   ========================================================================== */

.guides-index__item,
.ms-guides__item {
	list-style: none;
	margin: 0;
	padding: 1.15rem 1.15rem 1rem;
	transition:
		transform 0.14s ease,
		box-shadow 0.14s ease,
		border-color 0.14s ease;
}

.guides-index__item:hover,
.ms-guides__item:hover {
	transform: translateY(-2px);
}

/* Card title */
.guides-index__item h2,
.ms-guides__item h2 {
	margin: 0 0 0.55rem;
	font-size: 1.3rem;
	line-height: 1.25;
}

.guides-index__item h2 a,
.ms-guides__item h2 a {
	text-decoration: none;
}

/* Excerpt */
.guides-index__excerpt,
.ms-guides__excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.72;
}

/* Published date badge */
.guides-index__meta,
.ms-guides__meta,
.guide-date {
	display: inline-flex;
	align-items: center;
	margin-top: 0.8rem;
	padding: 0.28rem 0.65rem;
	font-size: 0.86rem;
	line-height: 1;
	border-radius: 999px;
}

/* Featured first card */
.guides-index__item--featured,
.ms-guides__item--featured {
	padding: 1.35rem 1.35rem 1.2rem;
}

.guides-index__item--featured h2,
.ms-guides__item--featured h2 {
	font-size: 1.5rem;
}

@media (max-width: 640px) {
	.guides-index__item,
	.ms-guides__item,
	main ul li:has(h2) {
		padding: 1rem 0.95rem 0.95rem;
	}

	.guides-index__item h2,
	.ms-guides__item h2,
	main ul li h2 {
		font-size: 1.16rem;
	}

	.guides-index__excerpt,
	.ms-guides__excerpt,
	main ul li p {
		font-size: 0.98rem;
		line-height: 1.66;
	}
}


/* ==========================================================================
   8.  Inline guide images (guides_img_* from scratchpad editor)

   Alignment classes:
     .guides_img_left   - float left, text wraps right
     .guides_img_right  - float right, text wraps left
     .guides_img_center - centred, no wrap
     *_break variants   - full container width, clears floats

   Link wrapper:
     .guides_img_link   - <a> around the image
   ========================================================================== */

.guides_img_src {
	display: block;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 12px; /* shared across all sites; override in site CSS if needed */
}

/* --- Wrap mode: floated, constrained to 400px --- */

.guides_img_wrap.guides_img_left {
	float: left;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	margin: 0 1.2rem 0.8rem 0;
}

.guides_img_wrap.guides_img_right {
	float: right;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	margin: 0 0 0.8rem 1.2rem;
}

.guides_img_wrap.guides_img_center {
	float: none;
	display: block;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	margin: 0.6rem auto;
}

/* --- Break mode: full container width, clears preceding floats --- */

.guides_img_break.guides_img_left,
.guides_img_break.guides_img_right,
.guides_img_break.guides_img_center {
	float: none;
	clear: both;
	display: block;
	max-width: 100%;
	width: 100%;
	margin: 1rem 0;
}

/* --- Link wrapper --- */
/* Must carry border-radius so it clips the image correctly.
   border-radius value supplied by site CSS. */

.guides_img_link {
	display: inline-block;
	overflow: hidden;   /* clips child img corners when inside <a> */
	line-height: 0;     /* removes inline gap beneath <img> */
}

.guides_img_link img,
.guides_img_link img.guides_img_src {
	display: block;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* When a link wraps a floated image the float and sizing must sit on
   the link itself — otherwise inline-block contains the float and it
   never escapes into the document flow. */

.guides_img_link:has(.guides_img_wrap.guides_img_left) {
	float: left;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	margin: 0 1.2rem 0.8rem 0;
}

.guides_img_link:has(.guides_img_wrap.guides_img_right) {
	float: right;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	margin: 0 0 0.8rem 1.2rem;
}

.guides_img_link:has(.guides_img_wrap.guides_img_center) {
	float: none;
	display: block;
	max-width: 400px;
	max-height: 400px;
	width: auto;
	margin: 0.6rem auto;
}

.guides_img_link:has(.guides_img_break) {
	float: none;
	clear: both;
	display: block;
	max-width: 100%;
	width: 100%;
	margin: 1rem 0;
}

/* When inside a link wrapper the img must not re-apply float/margin */
.guides_img_link .guides_img_wrap,
.guides_img_link .guides_img_break {
	float: none;
	width: 100%;
	margin: 0;
}

/* Zoom-in cursor on fullsize images */
img.guides_img_src[data-fullsize="1"] {
	cursor: zoom-in;
}


/* ==========================================================================
   9.  Full-size image popup overlay
   Site CSS supplies: overlay background opacity, border-radius on image,
   image box-shadow, close button colour.
   ========================================================================== */

.gimg-popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85); /* shared default; override in site CSS if needed */
	z-index: 9999;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}

.gimg-popup-overlay.gimg-popup--open {
	display: flex;
}

.gimg-popup-overlay img {
	max-width: 98vw;
	max-height: 94vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
	cursor: default;
}

.gimg-popup-close {
	position: absolute;
	top: 0.8rem;
	right: 1rem;
	font-size: 2rem;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	background: none;
	border: none;
	padding: 0;
}


/* ==========================================================================
   Guide listing page (basic list — generated without scratchpad cards)
   Covers both .guide-list-item (older markup) and .guide-item (gadgets markup)
   ========================================================================== */

.guide-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.guide-list-item,
.guide-item {
	/* padding and border-bottom intentionally omitted —
	   site CSS controls these (plain list vs card treatment) */
}

.guide-list-item:last-child,
.guide-item:last-child {
	border-bottom: none;
}

/* H2 title inside a list item — normal H2 size, NOT clamp H1 size */
.guide-list-item h2,
.guide-item h2,
.guide-item .guide-title {
	margin: 0 0 0.3rem;
	font-size: 1.1rem;
	line-height: 1.3;
	letter-spacing: normal;
}

.guide-list-item .guide-meta,
.guide-item .guide-meta {
	font-size: 0.85rem;
	margin: 0 0 0.4rem;
}

.guide-list-item .guide-summary,
.guide-item .guide-summary {
	font-size: 0.92rem;
	margin: 0;
}

/* Prevent list/paragraph content wrapping into left-floated images.
   display:flow-root creates a new block formatting context so each element
   sits fully to the right of any preceding float with its own padding intact.
   Applied to all p and ul in guide-body - harmless when no float is present,
   essential when a guides_img_wrap or guides_img_link float precedes the
   element (sibling selectors cannot reach across <a> wrappers). */
.guide-body p,
.guide-body ul {
	display: flow-root;
}