/**
 * 09 — Content pages (long-form editorial landing pages).
 *
 * Presentation for the designed content posts built by inc/content.php: the
 * Reglas guide (post 6174, TSK-055) and the Regalo guide (post 7111, TSK-056).
 * Markup is hand-built `fm-reglas__*` / `fm-content__*` blocks stored in the post
 * content; Storefront single-post chrome is removed in PHP. Rules are anchored on
 * `body.fm` for a free specificity bump over Storefront/WC, per the cascade
 * strategy in AGENTS.md. Tokens only — canonical set in 01-tokens-header.css.
 *
 * Last partial in the enqueue chain (inc/assets.php), so it prints after 08.
 *
 * @package futbol-mesa
 */

/* Neutralise Storefront's .entry-content max-width/typography so the redesign
   controls its own section widths. The post wraps our blocks in .entry-content. */
body.fm.single-post .entry-content {
	max-width: none;
	margin: 0;
}

body.fm.single-post .entry-content > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Section rhythm ----------------------------------------------------------- */

/* The mockup had no breadcrumb, so its head carried a large top padding. On the
   live post the shared breadcrumb band (01-tokens-header.css) already supplies
   the ~28px-below-nav rhythm, so the hero only needs a modest top padding — a big
   value would stack into a void below the crumbs. Breadcrumb spacing itself is
   the site-wide default now, not a per-page override. */
body.fm .fm-reglas__head {
	max-width: 940px;
	margin: 0 auto;
	padding: clamp(16px, 2.2vw, 28px) var(--content-gutter) clamp(20px, 3vw, 32px);
}

body.fm .fm-reglas__figure-wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(8px, 2vw, 16px) var(--content-gutter) clamp(28px, 4vw, 48px);
}

body.fm .fm-reglas__section {
	max-width: 940px;
	margin: 0 auto;
	padding: clamp(16px, 3vw, 32px) var(--content-gutter);
}

body.fm .fm-reglas__section--wide {
	max-width: 1100px;
	padding-top: clamp(24px, 4vw, 44px);
	padding-bottom: clamp(24px, 4vw, 44px);
}

/* Page head / lede --------------------------------------------------------- */

body.fm .fm-reglas__eyebrow {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--eyebrow-band-size);
	font-weight: 700;
	letter-spacing: var(--eyebrow-band-tracking);
	text-transform: uppercase;
	color: var(--color-terracotta);
}

body.fm .fm-reglas__title {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: clamp(2.2rem, 5.4vw, 3.6rem);
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 14px 0 0;
	color: var(--color-ink);
}

body.fm .fm-reglas__lede {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	line-height: 1.6;
	color: var(--color-ink);
	max-width: 38em;
	margin: 22px 0 0;
	font-weight: 500;
}

/* Lead image --------------------------------------------------------------- */

body.fm .fm-reglas__figure {
	margin: 0;
	border-radius: var(--radius-panel);
	overflow: hidden;
	border: 1px solid var(--color-hairline);
	box-shadow: var(--shadow-figure);
}

body.fm .fm-reglas__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* Section headings --------------------------------------------------------- */

body.fm .fm-reglas__h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	letter-spacing: -0.02em;
	margin: 0 0 24px;
	color: var(--color-ink);
}

body.fm .fm-reglas__h2--tight {
	margin-bottom: 8px;
}

body.fm .fm-reglas__rule-line {
	height: 4px;
	width: 64px;
	background: var(--color-terracotta);
	border-radius: 2px;
	margin: 0 0 28px;
}

body.fm .fm-reglas__section-sub {
	font-size: 1.02rem;
	color: var(--color-muted);
	margin: 0 0 26px;
}

/* Reglas básicas — numbered cards ------------------------------------------ */

body.fm .fm-reglas__rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

body.fm .fm-reglas__rule {
	position: relative;
	background: #fff;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	padding: 20px 22px 20px 64px;
	line-height: 1.6;
	font-size: 1.02rem;
	color: var(--color-ink);
}

body.fm .fm-reglas__num {
	position: absolute;
	left: 18px;
	top: 18px;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-button);
	background: var(--color-pitch-green);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Acciones de Juego — card grid -------------------------------------------- */

body.fm .fm-reglas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	align-items: start;
}

body.fm .fm-reglas__card {
	background: #fff;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-card);
	padding: clamp(22px, 2.6vw, 30px);
}

body.fm .fm-reglas__card-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	margin: 0 0 14px;
	color: var(--color-terracotta);
}

body.fm .fm-reglas__card-list {
	margin: 0;
	padding-left: 20px;
	display: grid;
	gap: 10px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-ink);
}

body.fm .fm-reglas__card-list ul {
	margin: 8px 0 0;
	padding-left: 18px;
	display: grid;
	gap: 6px;
}

body.fm .fm-reglas__card-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-ink);
}

/* Extended rulebook — dark panel ------------------------------------------- */

body.fm .fm-reglas__panel {
	background: var(--color-ink);
	color: #fff;
	border-radius: var(--radius-panel);
	padding: clamp(26px, 3.4vw, 40px);
}

body.fm .fm-reglas__panel-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	margin: 0 0 14px;
	color: #fff;
}

body.fm .fm-reglas__panel-text {
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 14px;
}

body.fm .fm-reglas__panel-text:last-of-type {
	margin-bottom: 20px;
}

body.fm .fm-reglas__panel-link {
	color: var(--color-accent-green);
	font-weight: 600;
}

body.fm .fm-reglas__panel-link:hover,
body.fm .fm-reglas__panel-link:focus {
	color: #fff;
}

body.fm .fm-reglas__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

body.fm .fm-reglas__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--tint-white-chip);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 13px 22px;
	border-radius: var(--radius-pill);
}

body.fm .fm-reglas__pill:hover,
body.fm .fm-reglas__pill:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
}

/* Vídeos — thumbnail grid -------------------------------------------------- */

body.fm .fm-reglas__videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

body.fm .fm-reglas__video {
	display: block;
	background: #fff;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

body.fm .fm-reglas__video:hover,
body.fm .fm-reglas__video:focus {
	border-color: var(--color-terracotta);
	transform: translateY(-3px);
}

body.fm .fm-reglas__video-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--color-ink);
}

body.fm .fm-reglas__video-thumb--vimeo {
	background: var(--color-pitch-green);
}

body.fm .fm-reglas__video-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.fm .fm-reglas__video-play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #fff;
}

body.fm .fm-reglas__video-play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-terracotta);
}

body.fm .fm-reglas__video-thumb--vimeo .fm-reglas__video-play-icon {
	background: rgba(255, 255, 255, 0.18);
}

body.fm .fm-reglas__video-play-icon svg {
	width: 24px;
	height: 24px;
	fill: #fff;
}

body.fm .fm-reglas__video-label {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.78rem;
}

body.fm .fm-reglas__video-cap {
	display: block;
	padding: 14px 16px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-ink);
}

/* ==========================================================================
   Regalo — gift guide landing (post 7111, TSK-056)

   Same machinery as Reglas above: hand-built fm-regalo__* blocks in the post
   content (head/benefits grid/conclusion), Storefront single-post chrome
   removed in inc/content.php, the "Productos recomendados" grid + CTA band
   rendered from PHP so prices/stock stay live. Page-prefixed like fm-reglas__
   so each guide stays independently editable. Tokens only, body.fm anchored.
   ========================================================================== */

/* Page head / lede --------------------------------------------------------- */

body.fm .fm-regalo__head {
	max-width: 940px;
	margin: 0 auto;
	padding: clamp(16px, 2.2vw, 28px) var(--content-gutter) clamp(20px, 3vw, 32px);
}

body.fm .fm-regalo__eyebrow {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--eyebrow-band-size);
	font-weight: 700;
	letter-spacing: var(--eyebrow-band-tracking);
	text-transform: uppercase;
	color: var(--color-terracotta);
}

body.fm .fm-regalo__title {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	letter-spacing: -0.03em;
	line-height: 1.04;
	margin: 14px 0 0;
	color: var(--color-ink);
}

body.fm .fm-regalo__lede {
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	line-height: 1.65;
	color: var(--color-ink);
	max-width: 40em;
	margin: 24px 0 0;
	font-weight: 500;
}

/* Section wrappers --------------------------------------------------------- */

body.fm .fm-regalo__section {
	max-width: 940px;
	margin: 0 auto;
	padding: clamp(16px, 3vw, 32px) var(--content-gutter);
}

body.fm .fm-regalo__section--benefits {
	max-width: 1100px;
}

body.fm .fm-regalo__section--conclusion {
	padding-top: clamp(24px, 4vw, 44px);
	padding-bottom: clamp(24px, 4vw, 44px);
}

/* Benefits grid ------------------------------------------------------------ */

body.fm .fm-regalo__benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(18px, 2.4vw, 26px);
}

body.fm .fm-regalo__benefit {
	background: #fff;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-card);
	padding: clamp(24px, 2.8vw, 32px);
}

body.fm .fm-regalo__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--color-cream);
	border: 1px solid var(--color-hairline);
	color: var(--color-terracotta);
	margin-bottom: 16px;
}

body.fm .fm-regalo__benefit-icon svg {
	width: 24px;
	height: 24px;
}

body.fm .fm-regalo__benefit-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.2rem;
	margin: 0 0 12px;
	color: var(--color-ink);
}

body.fm .fm-regalo__benefit-text {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-ink);
	margin: 0;
}

/* Conclusión — dark panel -------------------------------------------------- */

body.fm .fm-regalo__panel {
	background: var(--color-ink);
	color: #fff;
	border-radius: var(--radius-panel);
	padding: clamp(28px, 3.6vw, 44px);
}

body.fm .fm-regalo__panel-title {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: #fff;
}

body.fm .fm-regalo__panel-text {
	font-size: 1.1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

/* Productos recomendados — live product grid (rendered in inc/content.php) -- */

body.fm .fm-regalo__products {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 56px) var(--content-gutter);
}

body.fm .fm-regalo__products-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	color: var(--color-ink);
}

body.fm .fm-regalo__products-sub {
	font-size: 1.02rem;
	color: var(--color-muted);
	margin: 0 0 28px;
}