/**
 * CASTICO Blog — index elements and article template.
 *
 * Design source: mockups/castico-blog-template.html
 *
 * Every rule is scoped under .castico-blog. The mockup was a standalone
 * document and reset `*`, `body`, `a` and `img` globally; here the page shares
 * a document with the Goya theme, so that reset would leak sitewide.
 *
 * Structural classes carry a cb- prefix. The mockup used names like .post,
 * .grid, .btn and .search, which collide with post_class() output and with the
 * theme's own utilities the moment either one is nested inside the other.
 */

.castico-blog {
	--cb-ink: #141414;
	--cb-ink-soft: #454545;
	--cb-line: #e6e3dd;
	--cb-paper: #ffffff;
	--cb-stone: #e9e4db;
	--cb-stone-deep: #d8d1c4;
	--cb-chip: #f2efe9;
	--cb-yellow: #fde000;
	--cb-yellow-soft: #fff9cc;
	--cb-grey: #6b6b6b;
	--cb-maxw: 1140px;
	--cb-r: 14px;

	/* Article measures. The template used to hard-code 720px for the text and
	 * 960px for the media, which reads as a narrow ribbon on a wide monitor.
	 *
	 * vw rather than %: .cb-post-body sits inside .cb-reader, so a percentage
	 * would resolve against a parent that is already narrowed — 60% of 60%.
	 * vw is measured against the viewport wherever it is used.
	 *
	 * clamp rather than a media query: the lower bound keeps today's 720px on
	 * phones and small laptops (max-width never forces an element wider than
	 * its container, so 720px still behaves as 100% on a 390px screen), and the
	 * upper bound stops the line from running past ~105 characters on ultrawide
	 * displays, where 60vw alone would be unreadable. The media bound stops at
	 * --cb-maxw so the hero never outgrows the breadcrumb row above it. */
	--cb-read: clamp(720px, 60vw, 1040px);
	--cb-media: clamp(960px, 72vw, 1140px);

	background: var(--cb-paper);
	color: var(--cb-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;

	/* The mockup was a standalone document and simply ended. Here the site's
	   black footer starts immediately after, and the last band — the stone
	   sample card, or the black CTA on an article — was landing flush against
	   it. */
	padding-bottom: 64px;
}

.castico-blog *,
.castico-blog *::before,
.castico-blog *::after { box-sizing: border-box; }

/* Typography has to be asserted rather than inherited. A plugin sets
   `* { font-family: -apple-system … }`, which beats inheritance on every
   descendant, and the theme's typography options emit
   `body, h1…h9 { font-family: … !important }`, which nothing but another
   !important can outrank. Without these two rules the whole design falls back
   to the theme's Roboto Flex. */
.castico-blog,
.castico-blog * { font-family: 'Inter', system-ui, sans-serif; }

.castico-blog h1,
.castico-blog h2,
.castico-blog h3,
.castico-blog h4 {
	font-family: 'Archivo', sans-serif !important;
	/* The theme also resets headings to font-weight:400 and recolours them.
	   Inheriting is what the mockup did: headings take the colour of whatever
	   band they sit in, so the white ones on photos still work. */
	font-weight: 700;
	color: inherit;
	letter-spacing: -.01em;
}

.castico-blog a { color: inherit; text-decoration: none; }
.castico-blog img { max-width: 100%; display: block; }
.castico-blog :focus-visible { outline: 3px solid var(--cb-yellow); outline-offset: 2px; border-radius: 4px; }

.castico-blog .cb-wrap { max-width: var(--cb-maxw); margin: 0 auto; padding: 0 24px; }

/* Full-bleed bands.
 *
 * The theme's Full Width Page template still puts the content inside
 * `.sec_row.container` (max-width 1420px + 15px of padding), so the masthead's
 * stone gradient and the sample band stopped short of the window edge while the
 * site header and footer ran the full width — the page read as a box floating
 * between them. WP Bakery's own "stretch row" needs its front-end script to
 * measure and apply negative margins, which never ran here.
 *
 * Undone from the wrapper instead, which sits above the container in the DOM.
 * Scoped to .castico-blog, so only pages built from these elements lose the
 * box. Copy stays on its own measure: every band re-centres its contents with
 * .cb-wrap, exactly as the footer does.
 *
 * Consequence worth knowing: any other WP Bakery element dropped onto a blog
 * page also goes edge to edge, since it has no .cb-wrap of its own. Put it in a
 * Text Block inside one of these elements, or give its row an inner column
 * padding.
 */
.castico-blog .sec_row.container { max-width: none; padding-left: 0; padding-right: 0; }
.castico-blog .vc_row.wpb_row { margin-left: 0; margin-right: 0; }
.castico-blog .wpb_column.vc_column_container,
.castico-blog .wpb_column.vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }

@media (prefers-reduced-motion: reduce) {
	.castico-blog *,
	.castico-blog *::before,
	.castico-blog *::after { animation: none !important; transition: none !important; }
}

/* Buttons — shared by the index and the article footer. */
.castico-blog .cb-btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--cb-ink); color: #fff;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .04em;
	padding: 14px 26px; border-radius: 8px; border: none; cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.castico-blog .cb-btn:hover { background: #000; color: #fff; transform: translateY(-1px); }
.castico-blog .cb-btn .cb-arr { transition: transform .15s ease; }
.castico-blog .cb-btn:hover .cb-arr { transform: translateX(3px); }
.castico-blog .cb-btn-ghost { background: #fff; color: var(--cb-ink); border: 1.5px solid var(--cb-ink); }
.castico-blog .cb-btn-ghost:hover { background: var(--cb-ink); color: #fff; }
.castico-blog .cb-btn-soon {
	display: inline-flex; align-items: center;
	background: var(--cb-chip); color: var(--cb-grey);
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .04em;
	padding: 15px 30px; border-radius: 10px; border: 1px solid var(--cb-stone-deep);
	cursor: default; white-space: nowrap;
}

/* ================================================================== *
 * Index — masthead
 * ================================================================== */

.castico-blog .cb-hero {
	padding: 40px 0 10px;
	background: linear-gradient(180deg, var(--cb-stone) 0%, #f6f3ed 46%, #fff 100%);
}
.castico-blog .cb-masthead {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding-bottom: 13px; border-bottom: 1px solid var(--cb-stone-deep);
}
.castico-blog .cb-brandline {
	display: inline-flex; align-items: center; gap: 11px;
	font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700;
	letter-spacing: .24em; text-transform: uppercase; color: var(--cb-ink); margin: 0;
}
.castico-blog .cb-brandline::before { content: ""; width: 22px; height: 3px; background: var(--cb-yellow); border-radius: 2px; }
.castico-blog .cb-count {
	font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: #8a7f6a; margin: 0;
}
.castico-blog .cb-count b { color: var(--cb-ink); font-weight: 700; }
.castico-blog .cb-hero h1 {
	font-size: clamp(38px, 6.4vw, 66px); line-height: .98; letter-spacing: -.035em;
	font-weight: 800; margin: 26px 0 0; max-width: 15ch;
}
.castico-blog .cb-hero .cb-sub {
	font-size: 18px; color: var(--cb-ink-soft); max-width: 54ch; margin: 18px 0 0; line-height: 1.55;
}
@media (max-width: 560px) {
	.castico-blog .cb-hero { padding: 26px 0 6px; }
	.castico-blog .cb-hero h1 { margin-top: 20px; letter-spacing: -.028em; }
	.castico-blog .cb-hero .cb-sub { font-size: 16.5px; margin-top: 14px; }
	.castico-blog .cb-brandline { font-size: 11px; letter-spacing: .2em; }
}

/* ================================================================== *
 * Index — featured carousel
 * ================================================================== */

.castico-blog .cb-carousel { position: relative; margin: 30px 0 4px; }
.castico-blog .cb-track { position: relative; }
.castico-blog .cb-featured {
	border-radius: var(--cb-r); overflow: hidden;
	background: #cfc6b6; min-height: 340px;
	display: flex; align-items: flex-end; border: 1px solid var(--cb-line);
}
.castico-blog .cb-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease; }
.castico-blog .cb-slide.is-on { position: relative; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .castico-blog .cb-slide { transition: none; } }

.castico-blog .cb-featured > img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The mockup's gradient was drawn against a two-line title. A real headline
   wraps to four and pushes the category line up into the part of the photo the
   scrim barely touches, so the ramp is weighted further up and the copy carries
   its own shadow. */
.castico-blog .cb-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(10, 10, 10, .84) 0%, rgba(10, 10, 10, .46) 55%, rgba(10, 10, 10, .1) 100%);
}
.castico-blog .cb-fcontent {
	position: relative; z-index: 2; padding: 34px 36px; color: #fff; max-width: 680px;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
.castico-blog .cb-badge {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
	letter-spacing: .12em; text-transform: uppercase;
	color: #000; background: var(--cb-yellow); padding: 6px 12px; border-radius: 6px; margin-bottom: 14px;
}
.castico-blog .cb-fcat {
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--cb-yellow); margin: 0 0 8px;
}
.castico-blog .cb-featured h2 {
	font-size: clamp(24px, 3.6vw, 38px); line-height: 1.08; margin: 0 0 12px; color: #fff; max-width: 20ch;
	/* Past three lines the block outgrows the slide and the badge, category and
	   read time get pushed off the top. The full title is still in the link. */
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Same stretched-link trick as the cards. The arrows and dots sit at z-index 4
   so they stay clickable above it. */
.castico-blog .cb-featured h2 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.castico-blog .cb-fmeta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #e7e2d8; font-weight: 600; }
.castico-blog .cb-fmeta svg { width: 15px; height: 15px; stroke: #e7e2d8; fill: none; stroke-width: 1.7; }
.castico-blog .cb-flink {
	margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: #fff;
}
.castico-blog .cb-flink .cb-arr { transition: transform .15s ease; }
.castico-blog .cb-featured:hover .cb-flink .cb-arr { transform: translateX(4px); }

/* Arrows sit top-right, clear of the bottom-left text block. */
.castico-blog .cb-nav {
	position: absolute; top: 16px; z-index: 4; width: 38px; height: 38px;
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(20, 20, 20, .42); backdrop-filter: blur(6px); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s, border-color .15s;
}
.castico-blog .cb-nav:hover { background: rgba(20, 20, 20, .72); border-color: rgba(255, 255, 255, .8); }
.castico-blog .cb-nav svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.2; }
.castico-blog .cb-nav.cb-prev { right: 62px; }
.castico-blog .cb-nav.cb-next { right: 16px; }

.castico-blog .cb-dots { position: absolute; right: 18px; bottom: 16px; z-index: 4; display: flex; gap: 8px; }
.castico-blog .cb-dot {
	width: 9px; height: 9px; padding: 0; border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .9); background: transparent; cursor: pointer;
	transition: background .15s, transform .15s;
}
.castico-blog .cb-dot.is-on { background: var(--cb-yellow); border-color: var(--cb-yellow); transform: scale(1.25); }

@media (max-width: 560px) {
	.castico-blog .cb-featured { min-height: 300px; }
	.castico-blog .cb-fcontent { padding: 24px 22px 40px; }
	.castico-blog .cb-nav { width: 34px; height: 34px; top: 12px; }
	.castico-blog .cb-nav.cb-prev { right: 54px; }
	.castico-blog .cb-nav.cb-next { right: 12px; }
	.castico-blog .cb-nav svg { width: 16px; height: 16px; }
	.castico-blog .cb-dots { right: auto; left: 22px; bottom: 14px; }
}

/* ================================================================== *
 * Index — toolbar, grid, empty state
 * ================================================================== */

/* --cb-sticky-top is measured by the script: the theme's header only turns
   fixed once the page scrolls, which is exactly when this toolbar sticks, and
   at top:0 the filters would slide underneath it. */
.castico-blog .cb-toolbar {
	position: sticky; top: var(--cb-sticky-top, 0px); z-index: 30;
	background: var(--cb-paper); padding: 16px 0 12px; box-shadow: 0 1px 0 var(--cb-line);
}
.castico-blog .cb-search { position: relative; max-width: 380px; margin-bottom: 14px; }
.castico-blog .cb-search > svg {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; stroke: var(--cb-grey); fill: none; stroke-width: 2;
}
.castico-blog .cb-search input {
	width: 100%; padding: 11px 38px 11px 42px;
	font-family: 'Inter', sans-serif; font-size: 15px;
	border: 1.5px solid var(--cb-line); border-radius: 10px; background: #fff;
	outline: none; transition: border-color .14s;
}
.castico-blog .cb-search input:focus { border-color: var(--cb-ink); }
.castico-blog .cb-clear {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	border: 0; background: none; font-size: 20px; color: var(--cb-grey);
	cursor: pointer; line-height: 1; display: none;
}
.castico-blog .cb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.castico-blog .cb-pill {
	font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .02em;
	padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--cb-line);
	background: #fff; color: var(--cb-ink); cursor: pointer; transition: all .14s; white-space: nowrap;
}
.castico-blog .cb-pill:hover { border-color: var(--cb-ink); }
.castico-blog .cb-pill.is-active { background: var(--cb-ink); color: #fff; border-color: var(--cb-ink); }
@media (max-width: 640px) {
	.castico-blog .cb-search { max-width: none; }
	.castico-blog .cb-pills { flex-wrap: wrap; gap: 6px; }
	.castico-blog .cb-pill { font-size: 12px; padding: 7px 11px; }
}

.castico-blog .cb-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px; padding: 28px 0 0;
}
.castico-blog .cb-card {
	position: relative;
	border: 1px solid var(--cb-line); border-radius: var(--cb-r); background: #fff;
	display: flex; flex-direction: column; overflow: hidden; text-align: left;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* The whole card is the click target, but only the title is a link: one entry
   in the tab order and one sensible name for a screen reader. */
.castico-blog .cb-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.castico-blog .cb-card:hover {
	box-shadow: 0 16px 38px -18px rgba(0, 0, 0, .3);
	transform: translateY(-3px); border-color: var(--cb-stone-deep);
}
.castico-blog .cb-card-img {
	aspect-ratio: 16 / 10; position: relative; overflow: hidden;
	background: linear-gradient(135deg, #e7e0d4, #cfc6b6);
}
.castico-blog .cb-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.castico-blog .cb-card:hover .cb-card-img img { transform: scale(1.05); }
.castico-blog .cb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.castico-blog .cb-ph svg { width: 46px; height: 46px; stroke: rgba(20, 20, 20, .32); fill: none; stroke-width: 1.3; }
.castico-blog .cb-cat-tag {
	position: absolute; left: 12px; top: 12px; z-index: 2;
	font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: #fff; background: rgba(20, 20, 20, .84); padding: 5px 10px; border-radius: 6px;
}
/* Unpublished posts are only ever listed for editors. */
.castico-blog .cb-status {
	position: absolute; right: 12px; top: 12px; z-index: 2;
	font-family: 'Archivo', sans-serif;
	font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: #000; background: var(--cb-yellow); padding: 5px 10px; border-radius: 6px;
}
.castico-blog .cb-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.castico-blog .cb-card h3 { font-size: 18.5px; margin: 0 0 9px; line-height: 1.22; }
.castico-blog .cb-card h3 a { display: block; }
.castico-blog .cb-card .cb-ex { font-size: 14px; color: var(--cb-ink-soft); margin: 0 0 14px; line-height: 1.5; }
.castico-blog .cb-card .cb-meta {
	margin-top: auto; display: flex; align-items: center; justify-content: space-between;
	gap: 8px; font-size: 12.5px; color: #9a9384; font-weight: 600;
}
.castico-blog .cb-card .cb-meta .cb-read { display: inline-flex; align-items: center; gap: 5px; }
.castico-blog .cb-card .cb-meta svg { width: 14px; height: 14px; stroke: #9a9384; fill: none; stroke-width: 1.7; }
.castico-blog .cb-card .cb-meta .cb-arr { font-family: 'Archivo', sans-serif; color: var(--cb-ink); transition: transform .15s ease; }
.castico-blog .cb-card:hover .cb-meta .cb-arr { transform: translateX(4px); }
.castico-blog .cb-card.is-hidden { display: none; }

@media (max-width: 560px) {
	.castico-blog .cb-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 18px; }
	.castico-blog .cb-card h3 { font-size: 14px; line-height: 1.2; margin: 0 0 6px; }
	.castico-blog .cb-card .cb-ex { display: none; }
	.castico-blog .cb-card-body { padding: 12px 12px 13px; }
	.castico-blog .cb-card .cb-meta { font-size: 10.5px; }
	.castico-blog .cb-card .cb-meta .cb-arr { display: none; }
	.castico-blog .cb-cat-tag { font-size: 9px; padding: 3px 7px; left: 8px; top: 8px; }
}

.castico-blog .cb-more { display: flex; justify-content: center; padding: 32px 0 0; }
.castico-blog .cb-more[hidden] { display: none; }

.castico-blog .cb-empty {
	display: none; border: 1.5px dashed var(--cb-line); border-radius: var(--cb-r);
	padding: 42px 26px; text-align: center; background: #fafaf8; margin-top: 28px;
}
.castico-blog .cb-empty.is-shown { display: block; }
.castico-blog .cb-empty h3 { margin: 0 0 8px; font-size: 20px; }
.castico-blog .cb-empty p { margin: 0 auto 18px; color: var(--cb-ink-soft); max-width: 56ch; }

/* ================================================================== *
 * Sample / CTA band
 * ================================================================== */

.castico-blog .cb-band {
	background: var(--cb-stone); border-radius: var(--cb-r);
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; padding: 28px 34px; flex-wrap: wrap; margin: 54px 0 0;
}
.castico-blog .cb-band .cb-band-text { max-width: 46ch; }
.castico-blog .cb-band h3 { margin: 0; font-size: 20px; }
.castico-blog .cb-band p { margin: 4px 0 0; color: var(--cb-ink-soft); font-size: 15px; }
@media (max-width: 600px) { .castico-blog .cb-band { padding: 22px; } }

/* ================================================================== *
 * Article — reading progress
 * ================================================================== */

.castico-blog-progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 0;
	background: #fde000; z-index: 60; transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) { .castico-blog-progress { transition: none; } }

/* ================================================================== *
 * Article — header
 * ================================================================== */

.castico-blog .cb-post-top { background: var(--cb-paper); border-bottom: 1px solid var(--cb-line); }
.castico-blog .cb-crumbs {
	font-size: 12.5px; color: var(--cb-grey); padding: 18px 24px 0;
	max-width: var(--cb-maxw); margin: 0 auto; display: flex; gap: 7px; flex-wrap: wrap;
}
.castico-blog .cb-crumbs a { color: var(--cb-grey); }
.castico-blog .cb-crumbs a:hover { color: var(--cb-ink); }
.castico-blog .cb-crumbs .cb-sep { color: var(--cb-stone-deep); }
.castico-blog .cb-backrow { max-width: var(--cb-maxw); margin: 0 auto; padding: 0 24px 18px; }
.castico-blog .cb-back {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .03em;
	color: var(--cb-ink); border: 1.5px solid var(--cb-line); background: #fff;
	border-radius: 8px; padding: 8px 15px; cursor: pointer; margin: 14px 0 0; transition: .14s;
}
.castico-blog .cb-back:hover { border-color: var(--cb-ink); }
.castico-blog .cb-back svg { width: 15px; height: 15px; stroke: var(--cb-ink); fill: none; stroke-width: 2; }

/* 40px wider than the text, the way it was at 760 against 720: the title is
   allowed to breathe past its own column. */
.castico-blog .cb-post-head { max-width: calc(var(--cb-read) + 40px); margin: 0 auto; padding: 8px 24px 0; }
.castico-blog .cb-pcat {
	display: inline-block; font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--cb-ink);
	background: var(--cb-yellow); padding: 5px 11px; border-radius: 6px; margin: 20px 0 14px;
}
.castico-blog .cb-post-title { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.08; margin: 0 0 14px; }
.castico-blog .cb-pmeta {
	font-size: 13.5px; color: var(--cb-grey); font-weight: 600;
	display: flex; align-items: center; gap: 14px; margin: 0 0 4px; flex-wrap: wrap;
}
.castico-blog .cb-pmeta span { display: inline-flex; align-items: center; gap: 6px; }
.castico-blog .cb-pmeta svg { width: 15px; height: 15px; stroke: var(--cb-grey); fill: none; stroke-width: 1.7; }

.castico-blog .cb-post-hero { max-width: var(--cb-media); margin: 24px auto 0; padding: 0 24px; }
.castico-blog .cb-post-hero img {
	width: 100%; aspect-ratio: 16 / 8; object-fit: cover;
	border-radius: var(--cb-r); border: 1px solid var(--cb-line);
	background: linear-gradient(135deg, #e7e0d4, #cdc4b3);
}
.castico-blog .cb-post-hero .cb-ph {
	position: relative; aspect-ratio: 16 / 8; border-radius: var(--cb-r);
	border: 1px solid var(--cb-line); background: linear-gradient(135deg, #e7e0d4, #cdc4b3);
}

.castico-blog .cb-reader { max-width: var(--cb-read); margin: 0 auto; padding: 0 24px; }

/* ================================================================== *
 * Article — body
 * ================================================================== */

/* Type scales with the measure. A longer line needs a bigger glyph and more
   leading to stay trackable: at 17px/1.72 the eye loses the return sweep once
   the column passes ~90 characters. */
.castico-blog .cb-post-body {
	max-width: var(--cb-read); margin: 0 auto; padding: 34px 24px 8px;
	font-size: 18px; color: #262626; line-height: 1.78;
}
.castico-blog .cb-post-body h2 {
	font-size: clamp(21px, 3vw, 27px); margin: 40px 0 12px; line-height: 1.2;
	scroll-margin-top: calc(var(--cb-sticky-top, 0px) + 24px);
	/* Keeps a two-line heading from dropping a single orphan word. Ignored by
	   browsers that do not support it. */
	text-wrap: balance;
}
.castico-blog .cb-post-body > h2:first-child { margin-top: 6px; }
.castico-blog .cb-post-body h3 { font-size: 20px; margin: 26px 0 8px; text-wrap: balance; }
.castico-blog .cb-post-body p { margin: 0 0 20px; text-wrap: pretty; }
.castico-blog .cb-post-body a {
	color: var(--cb-ink); text-decoration: underline; text-decoration-color: var(--cb-yellow);
	text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: 500;
}
.castico-blog .cb-post-body ul,
.castico-blog .cb-post-body ol { margin: 0 0 18px; padding-left: 20px; }
.castico-blog .cb-post-body li { margin: 0 0 9px; }
.castico-blog .cb-post-body strong { font-weight: 700; }
.castico-blog .cb-post-body figure { margin: 28px 0; }
.castico-blog .cb-post-body figure img {
	width: 100%; border-radius: var(--cb-r); border: 1px solid var(--cb-line);
	background: linear-gradient(135deg, #e9e2d6, #cfc6b6); aspect-ratio: 16 / 9; object-fit: cover;
}
.castico-blog .cb-post-body figcaption { font-size: 13px; color: var(--cb-grey); margin-top: 9px; text-align: center; }
.castico-blog .cb-post-body blockquote {
	margin: 24px 0; padding: 14px 20px; border-left: 4px solid var(--cb-yellow);
	background: #faf8f2; border-radius: 0 8px 8px 0; color: var(--cb-ink-soft); font-size: 16px;
}

/* The lead paragraph. Also matches a WP Bakery Text Block given the extra
   class name cb-lead, where the copy sits one level down in .wpb_wrapper. */
.castico-blog .cb-post-body .cb-lead,
.castico-blog .cb-post-body .cb-lead p { font-size: 20px; color: var(--cb-ink-soft); line-height: 1.62; }

/* WP Bakery rows inside the reader: the builder's own gutters would push the
   text out of the measure the article is set in. */
.castico-blog .cb-post-body .vc_row { margin-left: 0; margin-right: 0; }
.castico-blog .cb-post-body .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }
.castico-blog .cb-post-body .wpb_content_element { margin-bottom: 0; }
.castico-blog .cb-post-body .wpb_text_column > .wpb_wrapper > *:last-child { margin-bottom: 0; }

/* Callout box. */
.castico-blog .cb-keybox {
	border: 1.5px solid var(--cb-line); border-left: 4px solid var(--cb-yellow);
	border-radius: 10px; background: #faf8f2; padding: 18px 20px; margin: 24px 0;
}
.castico-blog .cb-keybox b { font-family: 'Archivo', sans-serif; display: block; margin-bottom: 6px; font-size: 15px; }
.castico-blog .cb-keybox p { margin: 0 0 10px; font-size: 15.5px; color: var(--cb-ink-soft); }
.castico-blog .cb-keybox > *:last-child { margin-bottom: 0; }

/* Comparison table. */
.castico-blog .cb-table-wrap {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1.5px solid var(--cb-line); border-radius: 14px; background: #fff; margin: 24px 0;
}
.castico-blog table.cb-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
.castico-blog table.cb-table th,
.castico-blog table.cb-table td {
	text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--cb-line);
	vertical-align: top; line-height: 1.45;
}
.castico-blog table.cb-table tr:last-child th,
.castico-blog table.cb-table tr:last-child td { border-bottom: 0; }
.castico-blog table.cb-table thead th {
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .03em;
	text-transform: uppercase; color: var(--cb-grey); background: #f6f6f4;
}
.castico-blog table.cb-table thead th.cb-hl { background: var(--cb-yellow); color: #000; }
.castico-blog table.cb-table tbody th { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--cb-ink); background: #fff; }
.castico-blog table.cb-table td.cb-hl { background: var(--cb-yellow-soft); font-weight: 500; }

/* On a phone the measure is the screen, so the type comes back down — but not
   to the old 16px, which was set against a 17px desktop body. */
@media (max-width: 760px) {
	.castico-blog .cb-post-body { font-size: 17px; line-height: 1.72; }
	.castico-blog .cb-post-body .cb-lead,
	.castico-blog .cb-post-body .cb-lead p { font-size: 18px; }
}

/* ================================================================== *
 * Article — key takeaways and table of contents
 * ================================================================== */

.castico-blog .cb-takeaways {
	margin: 32px auto 0; background: #faf8f2;
	border: 1.5px solid var(--cb-line); border-left: 4px solid var(--cb-yellow);
	border-radius: 12px; padding: 20px 22px;
}
.castico-blog .cb-takeaways h2 {
	font-family: 'Archivo', sans-serif; font-size: 13px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--cb-grey); margin: 0 0 12px;
}
.castico-blog .cb-takeaways ul { list-style: none; margin: 0; padding: 0; }
.castico-blog .cb-takeaways li {
	position: relative; padding: 5px 0 5px 28px; font-size: 15.5px; color: var(--cb-ink); line-height: 1.5;
}
.castico-blog .cb-takeaways li::before {
	content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 8px;
	border-left: 2.5px solid var(--cb-ink); border-bottom: 2.5px solid var(--cb-ink);
	transform: rotate(-45deg);
}

.castico-blog .cb-toc { margin: 26px auto 0; border: 1.5px solid var(--cb-line); border-radius: 12px; padding: 6px 4px; }
.castico-blog .cb-toc summary {
	cursor: pointer; list-style: none;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .04em;
	padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; color: var(--cb-ink);
}
.castico-blog .cb-toc summary::-webkit-details-marker { display: none; }
.castico-blog .cb-toc summary .cb-chev { width: 16px; height: 16px; stroke: var(--cb-grey); fill: none; stroke-width: 2; transition: transform .2s; }
.castico-blog .cb-toc[open] summary .cb-chev { transform: rotate(180deg); }
.castico-blog .cb-toc ol { margin: 0; padding: 4px 18px 14px 36px; }
.castico-blog .cb-toc li { margin: 0 0 8px; font-size: 14.5px; }
/* text-decoration is reset explicitly: the table of contents usually sits
   inside .cb-post-body, whose links carry the yellow underline. */
.castico-blog .cb-toc a { color: var(--cb-ink-soft); text-decoration: none; }
.castico-blog .cb-toc a:hover { color: var(--cb-ink); text-decoration: underline; text-decoration-color: var(--cb-yellow); }

/* ================================================================== *
 * Article — share row
 * ================================================================== */

.castico-blog .cb-share {
	max-width: var(--cb-read); margin: 30px auto 0; padding: 18px 24px 0;
	border-top: 1px solid var(--cb-line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.castico-blog .cb-share > span {
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: #9a9384; margin-right: 4px;
}
.castico-blog .cb-share button,
.castico-blog .cb-share a {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 13px;
	border: 1.5px solid var(--cb-line); background: #fff; color: var(--cb-ink);
	border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: .14s;
}
.castico-blog .cb-share button:hover,
.castico-blog .cb-share a:hover { border-color: var(--cb-ink); }
.castico-blog .cb-share svg { width: 15px; height: 15px; stroke: var(--cb-ink); fill: none; stroke-width: 1.7; }

/* ================================================================== *
 * Article — footer
 * ================================================================== */

.castico-blog .cb-post-foot { max-width: var(--cb-media); margin: 34px auto 0; padding: 0 24px; }
.castico-blog .cb-related h2,
.castico-blog .cb-recprod h2 {
	font-family: 'Archivo', sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
	color: #9a9384; margin: 0 0 18px; font-weight: 700;
}
.castico-blog .cb-related { padding-top: 36px; border-top: 1px solid var(--cb-line); }
/* auto-fit rather than repeat(3, 1fr): with one or two related articles the
   fixed three-column grid left a card stranded at a third of the width. */
.castico-blog .cb-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.castico-blog .cb-rcard {
	border: 1px solid var(--cb-line); border-radius: 12px; overflow: hidden;
	transition: .16s; background: #fff; text-align: left; display: block;
}
.castico-blog .cb-rcard:hover { border-color: var(--cb-ink); transform: translateY(-2px); }
.castico-blog .cb-rcard .cb-rimg { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #e7e0d4, #cfc6b6); overflow: hidden; position: relative; }
.castico-blog .cb-rcard .cb-rimg img { width: 100%; height: 100%; object-fit: cover; }
.castico-blog .cb-rcard .cb-rb { padding: 14px 16px 16px; }
.castico-blog .cb-rcard span {
	display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: #9a9384; margin-bottom: 6px;
}
.castico-blog .cb-rcard b { font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.22; display: block; }

.castico-blog .cb-recprod { margin-top: 38px; }
.castico-blog .cb-prod-row { display: flex; flex-wrap: wrap; gap: 10px; }
.castico-blog .cb-prod-row a {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;
	border: 1.5px solid var(--cb-line); border-radius: 999px; padding: 9px 18px; transition: .15s;
}
.castico-blog .cb-prod-row a:hover { background: var(--cb-ink); color: #fff; border-color: var(--cb-ink); }
.castico-blog .cb-prod-row a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.castico-blog .cb-cta {
	margin: 42px auto 0; background: var(--cb-ink); color: #fff; border-radius: var(--cb-r);
	padding: 34px 36px; display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
}
.castico-blog .cb-cta h3 { margin: 0 0 4px; font-size: 23px; color: #fff; }
.castico-blog .cb-cta p { margin: 0; color: #cfcabf; font-size: 15px; }
.castico-blog .cb-cta .cb-btn { background: var(--cb-yellow); color: #000; }
.castico-blog .cb-cta .cb-btn:hover { background: #ffe94d; color: #000; }

@media (max-width: 760px) {
	.castico-blog .cb-related-grid { grid-template-columns: 1fr; gap: 14px; }
	.castico-blog .cb-rcard { display: flex; align-items: stretch; }
	.castico-blog .cb-rcard .cb-rimg { width: 120px; flex: 0 0 120px; aspect-ratio: auto; }
	.castico-blog .cb-cta { padding: 24px 22px; text-align: left; }
}

/* ================================================================== *
 * Article — mobile sticky action bar
 * ================================================================== */

.castico-blog-mbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	display: none; gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid #e6e3dd;
}
.castico-blog-mbar a {
	flex: 1; text-align: center; text-decoration: none;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13.5px;
	padding: 13px 8px; border-radius: 9px;
}
.castico-blog-mbar .cb-m-ghost { background: #fff; color: #141414; border: 1.5px solid #141414; }
.castico-blog-mbar .cb-m-solid { background: #141414; color: #fff; }
@media (max-width: 760px) {
	.castico-blog { padding-bottom: 40px; }
	.castico-blog-mbar { display: flex; }
	/* Clearance for the bar the article overlays, plus the same gap. */
	.castico-blog-post { padding-bottom: 118px; }
}

/* ================================================================== *
 * Pending CTAs
 *
 * These links leave the page, and the next document can take a second or two
 * to arrive — longer on a cold cache, and the product pages are the slowest of
 * the lot. The browser shows nothing at all in that gap, so the tap reads as
 * ignored and gets repeated. The button says it is working instead.
 *
 * The ring is drawn in currentColor, so one rule covers the black solid
 * button, the white ghost one and both halves of the action bar.
 * ================================================================== */

.castico-blog .cb-btn.is-pending,
.castico-blog-mbar a.is-pending {
	/* Centres the spinner against the label, and stops a second tap from
	   queueing another navigation. */
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	pointer-events: none;
}
.castico-blog .cb-btn.is-pending::before,
.castico-blog-mbar a.is-pending::before {
	content: ""; flex: none; width: 15px; height: 15px;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	opacity: .85;
	animation: cb-spin .6s linear infinite;
}
/* The arrow points forward next to a spinner that says "not yet". */
.castico-blog .cb-btn.is-pending .cb-arr { display: none; }

@keyframes cb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	/* The stylesheet already kills animations under this query, which would
	   leave the ring parked at 0deg looking like a bug. Fade the button. */
	.castico-blog .cb-btn.is-pending,
	.castico-blog-mbar a.is-pending { opacity: .6; }
	.castico-blog .cb-btn.is-pending::before,
	.castico-blog-mbar a.is-pending::before { display: none; }
}

/* ================================================================== *
 * WP Bakery editor
 *
 * The builder renders each element inside its own controls wrapper, which
 * breaks the sticky toolbar and collapses the absolutely positioned carousel
 * slides on top of each other. Give the editor a plain stacked preview.
 * ================================================================== */

.vc_editor .castico-blog .cb-toolbar { position: static; }
.vc_editor .castico-blog .cb-slide { position: relative; opacity: 1; visibility: visible; }
.vc_editor .castico-blog .cb-slide + .cb-slide { margin-top: 12px; }
.vc_editor .castico-blog .cb-card.is-hidden { display: flex; }

/* The theme never puts #header in the flow: it paints it absolutely and
 * reserves the 90px with a .header-spacer printed inside .site-content
 * (goya/header.php). The builder swaps that container's contents for its own
 * wrapper, so the spacer is gone while the header stays absolute — measured in
 * the editor, the content starts at 106 and the header runs to 166, eating the
 * first 60px. On the index that hides the whole masthead row.
 *
 * Put the header back in the flow instead of guessing a padding: the header
 * changes height on scroll and the bar above it wraps to two lines on narrow
 * windows, so any fixed number goes stale. !important because the theme's own
 * `.header_on_scroll .site-header` has the same specificity. Editor only. */
.vc_editor .site-header { position: static !important; }
.vc_editor .header-spacer { display: none !important; }