/*
 * Thiraika theme stylesheet.
 * Mobile-first: unprefixed rules target small screens; min-width media
 * queries layer on tablet/desktop enhancements.
 */

/* ---------------------------------------------------------------------
 * 1. Reset
 * ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Guards against any single element (full-bleed slider, off-canvas
   panel, etc.) pushing the document wider than the viewport, which is
   what makes full-width sections look like they "don't reach 100%"
   and shift sideways on mobile. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------
 * 2. Design tokens (light default, dark override)
 * ------------------------------------------------------------------- */
:root {
	--bg: #f7f3ec;
	--surface: #ffffff;
	--text: #1c1b18;
	--text-muted: #6b6558;
	--border: #e6e0d3;
	--accent: var(--thiraika-accent, #b08d57);
	--scrim: rgba(15, 13, 10, 0.55);
	--shadow: 0 8px 30px rgba(20, 16, 8, 0.08);

	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--container-max: 1320px;
	--gap: 1.5rem;
	--radius: 2px;
}

[data-theme="dark"] {
	--bg: #0f0f0f;
	--surface: #1a1a1a;
	--text: #f4f0e6;
	--text-muted: #b3ac9c;
	--border: #2b2b2b;
	--accent: var(--thiraika-accent, #c9a24b);
	--scrim: rgba(0, 0, 0, 0.65);
	--shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
	width: 100%;
	/* Site-wide safety net: a long unbroken word/URL anywhere (post
	   title, breadcrumb, widget text…) can force horizontal overflow
	   that overflow-x:hidden above then silently clips instead of
	   showing a scrollbar — this makes text wrap before that happens,
	   with zero visual effect on text that already fits. */
	overflow-wrap: break-word;
	word-break: break-word;
	transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }

/* Grid items default to min-width:auto, which resolves to their
   content's min-content size — for an item holding a large image
   (post thumbnails are up to 1400px wide) that can be far wider than
   the track's actual fr share, forcing the whole grid (and everything
   after it) wider than the viewport. This blanket min-width:0 on every
   direct child of any of the theme's CSS Grid containers is what
   actually lets each track shrink to its intended share — the
   individual minmax(0, …) fixes on specific hero/layout tracks
   reinforce the same fix for the highest-traffic cases, this covers
   every other zone grid at once. */
.thiraika-zone__grid > *,
.thiraika-hero__inner > *,
.thiraika-hero__inner--slider > *,
.thiraika-single__layout > *,
.thiraika-page__layout > *,
.thiraika-bento > * {
	min-width: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
	position: fixed; top: -100px; left: 1rem; z-index: 10000;
	background: var(--surface); color: var(--text);
	padding: 0.75rem 1.25rem; border: 1px solid var(--border);
	transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.thiraika-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* ---------------------------------------------------------------------
 * 3. Preloader — Θ fades in on load, whole overlay fades out when ready
 * ------------------------------------------------------------------- */
#thiraika-preloader {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: var(--bg);
	opacity: 1;
	/* Purely decorative: never intercepts clicks, even if the JS that
	   hides it fails to run for any reason (script blocked, error, slow
	   third-party asset, etc.) — the site underneath stays usable. */
	pointer-events: none;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}
#thiraika-preloader.is-hidden { opacity: 0; visibility: hidden; }
.thiraika-preloader__glyph {
	width: clamp(8rem, 36vw, 16rem);
	height: auto;
	opacity: 0;
	transform: scale(0.85);
	animation: thiraika-glyph-in 1.1s ease forwards;
}
/* Last-resort fallback if the bundled icon file is ever missing — see
   header.php — styled to still read as the same gold "Θ" mark. */
.thiraika-preloader__glyph--text {
	font-family: var(--font-display);
	font-size: clamp(4rem, 18vw, 8rem);
	color: var(--accent);
	width: auto;
}
@keyframes thiraika-glyph-in {
	0% { opacity: 0; transform: scale(0.85); }
	60% { opacity: 1; transform: scale(1.02); }
	100% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------------------
 * 4. Header
 * ------------------------------------------------------------------- */
.thiraika-header { position: relative; z-index: 100; background: var(--bg); }
.thiraika-header__top-inner {
	display: flex; align-items: center; justify-content: space-between;
	padding-block: 1.1rem;
	gap: 1rem;
}
.thiraika-header__left { display: flex; align-items: center; gap: 0.75rem; }
.thiraika-header__right { display: flex; align-items: center; gap: 1rem; }

.thiraika-menu-toggle, .thiraika-search-toggle, .thiraika-theme-toggle {
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: var(--text);
}
.thiraika-menu-toggle__lines {
	display: block; width: 22px; height: 2px; background: currentColor;
	position: relative;
}
.thiraika-menu-toggle__lines::before, .thiraika-menu-toggle__lines::after {
	content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
}
.thiraika-menu-toggle__lines::before { top: -6px; }
.thiraika-menu-toggle__lines::after { top: 6px; }
.thiraika-menu-toggle__label, .thiraika-search-toggle__label {
	font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
	display: none;
}
.thiraika-icon { width: 18px; height: 18px; color: currentColor; }

.thiraika-logo { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.thiraika-logo__glyph { font-family: var(--font-display); font-size: 2.4rem; color: var(--accent); line-height: 1; }
.thiraika-logo__word {
	font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--text);
}
.thiraika-logo__tagline {
	display: flex; align-items: center; gap: 0.6rem;
	font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-muted);
	text-transform: uppercase; margin-top: 0.15rem;
}
.thiraika-logo__rule { display: inline-block; width: 24px; height: 1px; background: var(--accent); }
.custom-logo-link img { max-height: 60px; width: auto; }
/* Light/dark logo swap (only relevant when a dark-mode logo has been
   uploaded in the Customizer — see thiraika_site_branding()). */
.thiraika-logo-swap__dark { display: none; }
[data-theme="dark"] .thiraika-logo-swap__light { display: none; }
[data-theme="dark"] .thiraika-logo-swap__dark { display: block; }

/* Bundled fallback logo: gold Θ icon stacked above the wordmark image,
   matching the original mockup (icon never needs a dark-mode swap —
   the gold reads fine on both light and dark backgrounds). */
/* Sizes live in custom properties so contexts like the footer (see
   .thiraika-footer__brand override below) can scale the exact same
   markup down proportionally instead of duplicating every value. */
.thiraika-logo-full {
	--thiraika-logo-icon-size: 4.14rem;
	--thiraika-logo-word-height: 117px;
	display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
/* Same fade-in used by the preloader glyph (thiraika-glyph-in, see
   above), so the header's Θ echoes that entrance once the preloader
   has faded out and the header becomes visible. */
.thiraika-logo-full__icon {
	height: var(--thiraika-logo-icon-size); width: auto;
	opacity: 0;
	animation: thiraika-glyph-in 1s ease 0.4s forwards;
}
/* The tagline is baked into the bottom of this same image (not a
   separate element we can size independently), so the whole wordmark
   has to render fairly tall before that small text is legible. */
.thiraika-logo-full .custom-logo { max-height: var(--thiraika-logo-word-height); width: auto; }
@media (min-width: 1024px) {
	.thiraika-logo-full { --thiraika-logo-icon-size: 4.83rem; --thiraika-logo-word-height: 145px; }
}

.thiraika-header__datetime {
	font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted);
	display: none; align-items: center; gap: 0.5rem;
}
.thiraika-header__sep { opacity: 0.5; }

.thiraika-social { display: none; align-items: center; gap: 0.9rem; }
.thiraika-social a { color: var(--text); opacity: 0.8; transition: opacity 0.2s ease, color 0.2s ease; }
.thiraika-social a:hover { opacity: 1; color: var(--accent); }
.thiraika-social svg { width: 16px; height: 16px; }

.thiraika-theme-toggle { position: relative; width: 34px; min-height: 34px; }
.thiraika-theme-toggle__state {
	position: absolute; inset: 0; top: 0;
	display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.thiraika-theme-toggle__label { font-size: 0.5rem; letter-spacing: 0.04em; white-space: nowrap; color: var(--text-muted); }
.thiraika-theme-toggle__state--dark { opacity: 0; transform: rotate(-40deg) scale(0.6); }
[data-theme="dark"] .thiraika-theme-toggle__state--light { opacity: 0; transform: rotate(40deg) scale(0.6); }
[data-theme="dark"] .thiraika-theme-toggle__state--dark { opacity: 1; transform: none; }

.thiraika-nav { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: none; }
.thiraika-nav__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; }
.thiraika-nav__link {
	display: inline-block; padding: 0.9rem 0;
	font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
	border-bottom: 2px solid transparent;
}
.thiraika-nav__item.is-current .thiraika-nav__link,
.thiraika-nav__link:hover { border-color: var(--accent); color: var(--accent); }
.thiraika-submenu { display: none; }

/* Off-canvas mobile menu */
.thiraika-offcanvas { position: fixed; inset: 0; z-index: 1000; visibility: hidden; display: none; }
/* The backdrop is later in the DOM than the panel (see header.php) so
   it must get an explicit lower z-index — otherwise it paints on top
   of the panel and swallows every click inside it, including nav
   links, which just made the whole menu look like it "only opens and
   closes" without ever navigating anywhere. */
.thiraika-offcanvas__backdrop { position: absolute; inset: 0; z-index: 1; background: var(--scrim); opacity: 0; transition: opacity 0.25s ease; }
.thiraika-offcanvas__panel {
	position: absolute; top: 0; left: 0; bottom: 0; width: min(86vw, 360px);
	z-index: 2;
	background: var(--surface); padding: 1.5rem;
	transform: translateX(-100%); transition: transform 0.3s ease;
	overflow-y: auto;
}
.thiraika-offcanvas.is-open { visibility: visible; }
.thiraika-offcanvas.is-open .thiraika-offcanvas__backdrop { opacity: 1; }
.thiraika-offcanvas.is-open .thiraika-offcanvas__panel { transform: translateX(0); }
.thiraika-offcanvas__close { font-size: 1.75rem; line-height: 1; margin-bottom: 1.5rem; }
.thiraika-offcanvas__list li { border-bottom: 1px solid var(--border); }
.thiraika-offcanvas__list a { display: block; padding: 0.9rem 0; font-family: var(--font-display); font-size: 1.05rem; }
.thiraika-offcanvas__list .sub-menu { margin-left: 1rem; }
.thiraika-offcanvas__list .sub-menu a { font-size: 0.92rem; padding-block: 0.6rem; }
.thiraika-offcanvas__social { margin-top: 1.5rem; }
.thiraika-offcanvas__social .thiraika-social { display: flex; }

/* Search overlay */
.thiraika-search-overlay {
	position: fixed; inset: 0; z-index: 1001;
	background: var(--bg);
	display: none; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
}
.thiraika-search-overlay.is-open { opacity: 1; visibility: visible; }
.thiraika-search-overlay__inner { width: min(90vw, 640px); }
.thiraika-search-overlay__close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; line-height: 1; }
.thiraika-search-form { display: flex; align-items: center; border-bottom: 2px solid var(--accent); padding-bottom: 0.5rem; gap: 0.75rem; }
.thiraika-search-form__field { flex: 1; background: transparent; border: 0; font-size: 1.4rem; font-family: var(--font-display); color: var(--text); }
.thiraika-search-form__field::placeholder { color: var(--text-muted); }
.thiraika-search-form__submit { color: var(--accent); }
.thiraika-search-form__submit .thiraika-icon { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------
 * 4b. News ticker
 * ------------------------------------------------------------------- */
.thiraika-ticker { display: flex; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); }
.thiraika-ticker__label {
	flex-shrink: 0; display: flex; align-items: center;
	background: var(--accent); color: #16140f;
	padding-inline: 1rem;
	font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.thiraika-ticker__viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.thiraika-ticker__track {
	display: flex; width: max-content;
	animation-name: thiraika-ticker-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
}
.thiraika-ticker--dir-right .thiraika-ticker__track { animation-direction: reverse; }
.thiraika-ticker--pause-hover:hover .thiraika-ticker__track { animation-play-state: paused; }
@keyframes thiraika-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.thiraika-ticker__list { display: flex; align-items: center; margin: 0; padding-block: 0.6rem; }
.thiraika-ticker__list li { white-space: nowrap; padding-inline: 1.5rem; position: relative; font-size: 0.85rem; font-weight: 600; }
.thiraika-ticker__list li:not(:first-child)::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.thiraika-ticker__list a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
 * 5. Hero + Τελευταία Νέα
 * ------------------------------------------------------------------- */
.thiraika-hero { padding-block: 2rem 2.5rem; }
.thiraika-hero__inner { display: grid; gap: 2rem; }
.thiraika-hero__main { order: 2; }
.thiraika-hero__media { order: 1; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.thiraika-hero__img { width: 100%; height: 100%; object-fit: cover; }
.thiraika-hero__watermark {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	font-family: var(--font-display); font-size: 12rem; color: rgba(255,255,255,0.18);
	pointer-events: none; user-select: none;
}
.thiraika-hero__title { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-block: 0.5rem 0.75rem; }
.thiraika-hero__title a:hover { color: var(--accent); }
.thiraika-hero__subtitle { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 1rem; max-width: 40ch; }
.thiraika-hero__link, .thiraika-zone__more, .thiraika-card__link {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
	color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.thiraika-hero__latest { order: 3; border-top: 1px solid var(--border); padding-top: 1.5rem; }

/* Hero slider (both slider-full and slider-latest styles) */
/* display:flex column so the (desktop) tab strip below the image gets
   its own natural height and the track+slides fill exactly what's
   left — needed for slider-latest, where the whole component is
   height-stretched to match the "Τελευταία Νέα" column next to it. */
.thiraika-hero-slider { position: relative; overflow: hidden; background: #000; width: 100%; max-width: 100%; display: flex; flex-direction: column; }
.thiraika-hero-slider__track { display: flex; width: 100%; flex: 1 1 auto; min-height: 0; transition: transform 0.5s ease; }
.thiraika-hero-slider__slide { position: relative; flex: 0 0 100%; max-width: 100%; aspect-ratio: 16 / 10; }
/* The "split" style has its own inner image with its own aspect-ratio
   (see .thiraika-split-slide__media below) — the outer slide must NOT
   also impose the generic 16/10 ratio on top of that, or the two
   conflict and leave a large empty gap under the slide's actual
   content (the slide's height was fixed by the ratio while its content
   was shorter). The background is also overridden here so that gap —
   if it ever reappears from a future change — reads as page background
   rather than a solid black band. */
.thiraika-hero--split .thiraika-hero-slider__slide { aspect-ratio: unset; background: var(--bg); }
.thiraika-hero-slide__media, .thiraika-hero-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thiraika-hero-slide__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
}
.thiraika-hero-slide__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.75rem 1.75rem 3rem; }
.thiraika-hero-slide__text { max-width: 720px; opacity: 0; transform: translateY(16px); }
.thiraika-hero-slider__slide.is-active .thiraika-hero-slide__text { animation: thiraika-slide-in 0.7s ease 0.15s forwards; }
@keyframes thiraika-slide-in {
	to { opacity: 1; transform: translateY(0); }
}
.thiraika-hero-slide__content .thiraika-eyebrow { color: var(--accent); }
.thiraika-hero-slide__title { color: #fff; font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.75rem); line-height: 1.1; margin-block: 0.5rem 0.6rem; text-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.thiraika-hero-slide__title a:hover { color: var(--accent); }
.thiraika-hero-slide__excerpt { color: rgba(255,255,255,0.85); font-size: 0.95rem; max-width: 55ch; }
.thiraika-hero-slide__cta {
	display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
	background: #fff; color: #16140f;
	padding: 0.8rem 1.6rem;
	font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.thiraika-hero-slide__cta:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

.thiraika-hero-slider__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 52px; height: 52px; border-radius: 50%;
	background: transparent; color: #fff; font-size: 2rem; font-weight: 300; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	text-shadow: 0 2px 10px rgba(0,0,0,0.45);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.thiraika-hero-slider__arrow:hover { background: rgba(0,0,0,0.35); transform: translateY(-50%) scale(1.06); }
.thiraika-hero-slider__arrow--prev { left: 0.25rem; }
.thiraika-hero-slider__arrow--next { right: 0.25rem; }

/* Slide navigation: compact dots on mobile (not enough width for text
   labels), text tabs (category per slide) on desktop — same buttons,
   two looks, swapped at the 1024px breakpoint below. */
.thiraika-hero-slider__dots { position: absolute; bottom: 1.1rem; right: 1.5rem; z-index: 3; display: flex; gap: 0.5rem; }
.thiraika-hero-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); padding: 0; transition: background-color 0.2s ease, transform 0.2s ease; }
.thiraika-hero-slider__dot[aria-current="true"] { background: #fff; transform: scale(1.3); }
.thiraika-hero-slider__dot-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.thiraika-hero--slider-full .thiraika-hero-slider__slide { aspect-ratio: unset; height: 80vh; min-height: 320px; max-height: 760px; }
.thiraika-hero__inner--slider { grid-template-columns: 1fr; }
.thiraika-hero__inner--slider .thiraika-hero__latest { border-top: 1px solid var(--border); border-left: 0; padding-top: 1.5rem; padding-left: 0; }

/* "Split" hero style: plain photo beside plain
   text instead of text-over-image, so — unlike the overlay slider
   styles above, which hardcode white text for legibility over a photo
   — every colour here comes from theme custom properties and flips
   correctly in dark mode with zero extra rules. */
.thiraika-hero--split .thiraika-hero-slider { background: transparent; }

.thiraika-split-slide { display: flex; flex-direction: column; gap: 1.5rem; }
.thiraika-split-slide__media { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); background: var(--border); }
.thiraika-split-slide__img { width: 100%; height: 100%; object-fit: cover; }
.thiraika-split-slide__content { display: flex; flex-direction: column; gap: 0.6rem; opacity: 0; transform: translateY(12px); }
.thiraika-hero-slider__slide.is-active .thiraika-split-slide__content { animation: thiraika-slide-in 0.6s ease 0.1s forwards; }
.thiraika-split-slide__title { color: var(--text); font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.2; }
.thiraika-split-slide__title a:hover { color: var(--accent); }
.thiraika-split-slide__excerpt { color: var(--text-muted); font-size: 1.02rem; max-width: 58ch; }
.thiraika-split-slide__meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-muted); }
.thiraika-split-slide__comments:hover { color: var(--accent); }
.thiraika-split-slide__dot { opacity: 0.5; }

/* Thumbnail-card nav row replacing dots/tabs: horizontally scrollable
   on mobile (same pattern as the carousel zone), fixed columns on
   desktop. Reuses .thiraika-hero-slider__dot so main.js needs no
   changes — these buttons just carry richer content than a plain dot.
   Selectors are qualified with .thiraika-hero--split (rather than the
   bare .thiraika-hero-slider__dots class) so they reliably beat the
   equal-specificity desktop tab-strip rule for the overlay slider
   styles further down this file, regardless of source order. */
.thiraika-hero--split .thiraika-hero-slider__dots {
	position: static; margin-top: 0.4rem;
	display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.35rem;
	scroll-snap-type: x proximity;
	background: transparent; border-top: 0; padding-inline: 0;
}
/* Each thumb is a landscape image with the title (and, when active, a
   progress bar) underneath — vertical, not the small-square-thumbnail
   + side text pattern used elsewhere in the theme. Qualified with the
   .thiraika-hero--split ancestor (not just the bare .thiraika-hero-thumb
   / .thiraika-hero-slider__dot classes) so these reliably beat the
   equal-specificity desktop .thiraika-hero-slider__dot reset used by
   the overlay slider styles' tab strip, regardless of source order. */
.thiraika-hero--split .thiraika-hero-thumb {
	flex: 0 0 220px; scroll-snap-align: start;
	display: flex; flex-direction: column; gap: 0.6rem; text-align: left;
	padding: 0; border-left: 0; border-bottom: 3px solid transparent;
	background: transparent; border-radius: 0;
	transition: opacity 0.2s ease, border-color 0.2s ease;
	opacity: 0.6;
}
.thiraika-hero--split .thiraika-hero-thumb:hover { opacity: 0.85; }
.thiraika-hero--split .thiraika-hero-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); }
.thiraika-hero-thumb__media { aspect-ratio: 5/2; overflow: hidden; border-radius: var(--radius); background: var(--border); }
.thiraika-hero-thumb__img { width: 100%; height: 100%; object-fit: cover; }
.thiraika-hero-thumb__text { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding-bottom: 0.6rem; }
.thiraika-hero-thumb__title { font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: var(--text-muted); }
.thiraika-hero--split .thiraika-hero-thumb[aria-current="true"] .thiraika-hero-thumb__title { color: var(--text); font-weight: 700; }

/* Autoplay progress bar: purely CSS, keyed off [aria-current="true"] —
   main.js already toggles that attribute on slide change, so the
   animation restarts on its own with zero extra script. */
.thiraika-hero-thumb__progress-track { display: block; height: 2px; background: var(--border); }
.thiraika-hero-thumb__progress { display: block; height: 100%; width: 0; background: var(--accent); }
.thiraika-hero--split .thiraika-hero-thumb[aria-current="true"] .thiraika-hero-thumb__progress {
	animation: thiraika-thumb-progress linear forwards;
	animation-duration: var(--thiraika-thumb-progress-duration, 9000ms);
}
.thiraika-hero-slider.is-paused .thiraika-hero-thumb__progress { animation-play-state: paused; }
@keyframes thiraika-thumb-progress {
	from { width: 0; }
	to { width: 100%; }
}

.thiraika-eyebrow {
	display: inline-block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 700; color: var(--accent); margin-bottom: 0.5rem;
}

.thiraika-zone__title {
	display: flex; align-items: center; gap: 0.75rem;
	font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--text); margin-bottom: 1rem;
}
.thiraika-zone__rule { flex: 1; height: 1px; background: var(--border); }

.thiraika-latest-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; }
.thiraika-latest-item { display: flex; gap: 0.75rem; align-items: baseline; }
.thiraika-latest-item__time { font-weight: 700; color: var(--accent); font-size: 0.8rem; flex-shrink: 0; }
.thiraika-latest-item__title { font-size: 0.92rem; }
.thiraika-latest-item__title:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
 * 6. Zones + cards
 * ------------------------------------------------------------------- */
.thiraika-zone { padding-block: 2rem; border-top: 1px solid var(--border); }
.thiraika-zone__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.thiraika-zone__header .thiraika-zone__title { flex: 1; margin-bottom: 0; }

.thiraika-zone__grid { display: grid; gap: var(--gap); }
.thiraika-zone__grid--2 { grid-template-columns: 1fr; }
.thiraika-zone__grid--3 { grid-template-columns: 1fr; }
/* Small-variant cards (fixed 96px thumbnail + text) get cramped in 2
   columns below ~480px — stack to 1 column until there's real room,
   then step up progressively instead of jumping straight to 4-up. */
.thiraika-zone__grid--4 { grid-template-columns: 1fr; }
.thiraika-zone__grid--featured-3 { grid-template-columns: 1fr; }
.thiraika-zone__side { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.thiraika-zone__grid--3-opinions { display: grid; gap: 2rem; grid-template-columns: 1fr; }

.thiraika-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); }
.thiraika-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--border); }
.thiraika-card__img, .thiraika-thumb-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.thiraika-thumb-fallback { background: linear-gradient(135deg, var(--border), var(--bg)); }
.thiraika-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.thiraika-card__title { font-size: 1.1rem; line-height: 1.3; }
.thiraika-card__title a:hover { color: var(--accent); }
.thiraika-card__excerpt { color: var(--text-muted); font-size: 0.92rem; }
.thiraika-card__link { margin-top: 0.35rem; align-self: flex-start; }

.thiraika-card--small .thiraika-card__title { font-size: 0.98rem; }
.thiraika-card--small { flex-direction: row; gap: 0.9rem; align-items: flex-start; border: 0; background: transparent; }
.thiraika-card--small .thiraika-card__media { width: 96px; flex-shrink: 0; aspect-ratio: 1/1; }
.thiraika-card--small .thiraika-card__body { padding: 0; }
.thiraika-card--small .thiraika-card__excerpt, .thiraika-card--small .thiraika-card__link { display: none; }

.thiraika-card--large .thiraika-card__title { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.thiraika-card--large .thiraika-card__media { aspect-ratio: 16/10; }
.thiraika-card--large .thiraika-card__body { padding: 1.25rem 1.4rem 1.5rem; }

/* Compact: same vertical shape as large (image / category / title /
   read more, no excerpt), scaled down — used where the card needs to
   size proportionally against a larger sibling, e.g. the mosaic-5
   zone's 4 small cards next to its 1 large one. Same 16/10 image
   ratio as --large so halving the card's width also halves its
   image height, keeping the two proportional without extra CSS. */
.thiraika-card--compact .thiraika-card__media { aspect-ratio: 16/10; }
.thiraika-card--compact .thiraika-card__body { padding: 0.75rem 0.85rem 1rem; gap: 0.35rem; }
.thiraika-card--compact .thiraika-card__title { font-size: 0.95rem; line-height: 1.3; }
.thiraika-card--compact .thiraika-card__excerpt { font-size: 0.85rem; }
.thiraika-card--compact .thiraika-eyebrow { font-size: 0.62rem; margin-bottom: 0.3rem; }
.thiraika-card--compact .thiraika-card__link { display: none; }

/* Overlay card: image fills the whole card, title sits on a gradient
   scrim over the image instead of in a body block below it. */
.thiraika-card--overlay { position: relative; border: 0; background: transparent; }
.thiraika-card__link-wrap { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius); }
.thiraika-card--overlay .thiraika-card__media { position: absolute; inset: 0; }
.thiraika-card--overlay .thiraika-card__img,
.thiraika-card--overlay .thiraika-thumb-fallback { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.thiraika-card__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.thiraika-card__overlay-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem; }
.thiraika-card--overlay .thiraika-eyebrow {
	background: var(--accent); color: #16140f; padding: 0.2rem 0.6rem; border-radius: 999px;
	font-size: 0.62rem;
}
.thiraika-card--overlay .thiraika-card__title { color: #fff; font-size: 1.05rem; line-height: 1.3; margin-top: 0.5rem; }
.thiraika-card--overlay:hover .thiraika-card__img,
.thiraika-card--overlay:hover .thiraika-thumb-fallback { transform: scale(1.08); }
.thiraika-card--overlay:hover .thiraika-card__title { color: var(--accent); }

/* List zone (compact headlines, no images) */
.thiraika-list-zone { display: flex; flex-direction: column; }
.thiraika-list-zone__item {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
	padding-block: 0.9rem; border-bottom: 1px solid var(--border);
}
.thiraika-list-zone__item:first-child { padding-top: 0; }
.thiraika-list-zone__item:last-child { border-bottom: 0; }
.thiraika-list-zone__title { font-size: 1rem; font-weight: 600; flex: 1 1 260px; }
.thiraika-list-zone__title:hover { color: var(--accent); }
.thiraika-list-zone__time { font-size: 0.78rem; color: var(--text-muted); margin-left: auto; }

/* Spotlight zone (single horizontal-split feature) */
.thiraika-spotlight { display: grid; gap: 1.25rem; background: var(--surface); border: 1px solid var(--border); }
.thiraika-spotlight__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.thiraika-spotlight__img { width: 100%; height: 100%; object-fit: cover; }
.thiraika-spotlight__body { padding: 0 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.thiraika-spotlight__title { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.thiraika-spotlight__title a:hover { color: var(--accent); }
.thiraika-spotlight__excerpt { color: var(--text-muted); max-width: 65ch; }

/* Split zone (1 large + 1 medium) */
.thiraika-zone__grid--split { grid-template-columns: 1fr; }

/* Mosaic-5 zone reuses featured-3's grid + adds a 2x2 side grid.
   Stacks to 1 column below 480px for the same small-card-cramping
   reason as .thiraika-zone__grid--4 above. */
.thiraika-zone__side--mosaic { grid-template-columns: 1fr; }

/* Horizontal scroll-snap carousel zone: overlay cards, generous peek
   of the next card as a "there's more" affordance, soft edge fade. */
.thiraika-carousel-wrap { position: relative; }
.thiraika-carousel {
	display: flex; gap: 1.1rem; overflow-x: auto;
	padding: 0.5rem 0.25rem 1rem;
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.thiraika-carousel__item { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; transition: transform 0.25s ease; }
.thiraika-carousel__item:hover { transform: translateY(-4px); }
.thiraika-carousel .thiraika-card { height: 100%; }

.thiraika-carousel__arrow {
	display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--surface); border: 1px solid var(--border); color: var(--text);
	font-size: 1.5rem; line-height: 1; align-items: center; justify-content: center;
	box-shadow: var(--shadow);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.thiraika-carousel__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.thiraika-carousel__arrow--prev { left: -1rem; }
.thiraika-carousel__arrow--next { right: -1rem; }

/* Bento Grid Posts zone: asymmetric mosaic, sizes assigned per item
   via --bento-* custom properties set inline per zone instance. */
.thiraika-bento-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.thiraika-bento-filters__btn {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: 999px;
	color: var(--text-muted); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.thiraika-bento-filters__btn:hover { border-color: var(--accent); color: var(--accent); }
.thiraika-bento-filters__btn.is-active { background: var(--accent); border-color: var(--accent); color: #16140f; }

/* grid-auto-flow: dense lets the browser backfill gaps left by tall/wide
   cards (e.g. a 2x1 card slotting into row 2 between two 1x2 columns)
   instead of leaving empty cells — this is what makes the size patterns
   in thiraika_bento_presets() actually produce a tight mosaic. */
.thiraika-bento { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; grid-auto-flow: dense; gap: var(--bento-gap, 1rem); }
.thiraika-bento-item { grid-column: span 1; grid-row: span 1; }
.thiraika-bento-item.is-hidden { display: none; }

.thiraika-bento-item__link {
	position: relative; display: block; height: 100%; min-height: 220px;
	overflow: hidden; border-radius: var(--bento-radius, 4px);
}
.thiraika-bento-item__media { position: absolute; inset: 0; }
.thiraika-bento-item__img, .thiraika-bento-item .thiraika-thumb-fallback {
	width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;
}
.thiraika-bento-item__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, var(--bento-overlay, rgba(0,0,0,0.65)) 0%, transparent 65%);
	transition: opacity 0.3s ease;
}
.thiraika-bento-item__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem; }
.thiraika-bento-item__cat {
	display: inline-block; background: var(--accent); color: #16140f;
	font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	padding: 0.2rem 0.55rem; border-radius: 999px; margin-bottom: 0.5rem;
}
.thiraika-bento-item__title { color: #fff; font-size: 1rem; line-height: 1.3; }
.thiraika-bento-item--title-small .thiraika-bento-item__title { font-size: 0.88rem; }
.thiraika-bento-item--title-large .thiraika-bento-item__title { font-size: 1.3rem; }
.thiraika-bento-item--2x2 .thiraika-bento-item__title,
.thiraika-bento-item--1x2 .thiraika-bento-item__title { font-size: 1.35rem; }
.thiraika-bento-item--title-large.thiraika-bento-item--2x2 .thiraika-bento-item__title { font-size: 1.6rem; }
.thiraika-bento-item__excerpt { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin-top: 0.5rem; max-width: 46ch; }
.thiraika-bento-item__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.5rem; font-size: 0.7rem; color: rgba(255,255,255,0.7); }

/* Hover: zoom image, lift card, brighten overlay. */
.thiraika-bento-item__link:hover .thiraika-bento-item__img,
.thiraika-bento-item__link:hover .thiraika-thumb-fallback { transform: scale(1.08); }
.thiraika-bento-item__link:hover .thiraika-bento-item__scrim { opacity: 0.85; }
.thiraika-bento-item__link { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.thiraika-bento-item__link:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Γνώμες opinions list */
.thiraika-zone__opinions { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.thiraika-opinion-list { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1rem; }
.thiraika-opinion-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.thiraika-opinion-item__avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.thiraika-opinion-item__title { display: block; font-size: 0.95rem; line-height: 1.35; margin-bottom: 0.25rem; }
.thiraika-opinion-item__title:hover { color: var(--accent); }
.thiraika-opinion-item__author { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-muted); }

/* Author-forward card grid: photo, name, title — "Απόψεις" archive. */
.thiraika-author-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 1.5rem;
}
@media (min-width: 640px) {
	.thiraika-author-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.thiraika-author-grid { grid-template-columns: repeat(4, 1fr); }
}
.thiraika-author-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.thiraika-author-card__avatar { display: block; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin-bottom: 0.85rem; background: var(--surface); }
.thiraika-author-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); transition: filter 0.25s ease; }
.thiraika-author-card:hover .thiraika-author-card__avatar img { filter: grayscale(0%); }
.thiraika-author-card__name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.4rem; }
.thiraika-author-card__title { margin: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: break-word; word-break: break-word; }
.thiraika-author-card__title a { color: var(--text); text-decoration: none; }
.thiraika-author-card__title a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
 * 6b. Widgets
 * ------------------------------------------------------------------- */
.thiraika-single__sidebar .widget {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 1.25rem 1.4rem;
	margin-bottom: 1.75rem;
}
.thiraika-single__sidebar .widget:last-child { margin-bottom: 0; }
.widget ul { list-style: none; }
.thiraika-single__sidebar .widget ul li,
.thiraika-footer__col .widget ul li {
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--border);
}
.thiraika-single__sidebar .widget ul li:last-child,
.thiraika-footer__col .widget ul li:last-child { border-bottom: 0; }
.widget select, .widget input[type="text"], .widget input[type="search"] {
	width: 100%; padding: 0.6rem 0.8rem; background: var(--bg);
	border: 1px solid var(--border); color: var(--text);
}
.widget img { max-width: 100%; height: auto; }
.thiraika-footer__col .widget { margin-bottom: 1.75rem; }
.thiraika-footer__col .widget:last-child { margin-bottom: 0; }

/* Video zone (YouTube click-to-load facade) */
.thiraika-video {
	position: relative; aspect-ratio: 16/9; overflow: hidden;
	background: #000; cursor: pointer; max-width: 960px; margin-inline: auto;
}
.thiraika-video__thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.thiraika-video__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 68px; height: 48px; transition: transform 0.2s ease;
}
.thiraika-video:hover .thiraika-video__play,
.thiraika-video:focus-visible .thiraika-video__play { transform: translate(-50%, -50%) scale(1.08); }
.thiraika-video.is-playing .thiraika-video__play,
.thiraika-video.is-playing .thiraika-video__thumb { display: none; }
.thiraika-video__iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------------
 * 7. Footer
 * ------------------------------------------------------------------- */
.thiraika-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 2rem; }
.thiraika-footer__top { display: grid; gap: 2rem; padding-block: 3rem; }
.thiraika-footer__brand .thiraika-logo { align-items: flex-start; text-align: left; }
.thiraika-footer__brand .thiraika-social { display: flex; margin-top: 1rem; }
/* Footer brand mark reuses the exact same header markup at 50% size,
   left-aligned instead of centered — see the CSS custom properties on
   .thiraika-logo-full above. */
.thiraika-footer__brand .thiraika-logo-full {
	--thiraika-logo-icon-size: 2.07rem;
	--thiraika-logo-word-height: 58.5px;
}
@media (min-width: 1024px) {
	.thiraika-footer__brand .thiraika-logo-full { --thiraika-logo-icon-size: 2.415rem; --thiraika-logo-word-height: 72.5px; }
}
.thiraika-footer__menu li { margin-bottom: 0.5rem; }
.thiraika-footer__menu a:hover { color: var(--accent); }
.thiraika-footer__contact p { margin-bottom: 0.6rem; color: var(--text-muted); }
.thiraika-footer__contact a:hover { color: var(--accent); }
.widget-title { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.thiraika-footer__bottom { border-top: 1px solid var(--border); padding-block: 1.25rem; font-size: 0.8rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------
 * 8. Single / Page
 * ------------------------------------------------------------------- */
.thiraika-breadcrumbs { padding-block: 1rem; }
.thiraika-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.78rem; color: var(--text-muted); max-width: var(--container-max); width: 100%; margin-inline: auto; padding-inline: 1.25rem; }
/* Flex items default to min-width:auto, which lets a long last item
   (typically the current article's full title) refuse to shrink below
   its own content width instead of wrapping — on mobile that pushed it
   past the viewport edge, where our global overflow-x:hidden safety
   net then silently clipped it instead of showing a scrollbar. */
.thiraika-breadcrumbs li { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.thiraika-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; }
.thiraika-breadcrumbs a:hover { color: var(--accent); }

.thiraika-single__head { padding-block: 1rem 1.5rem; max-width: 820px; }
.thiraika-single__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.75rem; }
.thiraika-single__subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 1rem; }
.thiraika-single__meta { font-size: 0.82rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.thiraika-single__dot { opacity: 0.5; }

/* Now rendered inside .thiraika-single__content (not full container
   width above it) so it's constrained to the content column and never
   runs under/past the sidebar next to it. */
.thiraika-single__figure { margin-bottom: 2rem; }
.thiraika-single__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.thiraika-single__figure figcaption { font-size: 0.8rem; color: var(--text-muted); padding-top: 0.5rem; }

.thiraika-single__layout, .thiraika-page__layout { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.thiraika-single__content { font-size: 1.08rem; line-height: 1.75; }
.thiraika-single__content > * + * { margin-top: 1.25rem; }
.thiraika-single__content h2 { font-size: 1.5rem; }
.thiraika-single__content h3 { font-size: 1.25rem; }
.thiraika-single__content blockquote { border-left: 3px solid var(--accent); padding-left: 1.25rem; font-style: italic; color: var(--text-muted); }
.thiraika-single__content img { border-radius: var(--radius); }
.thiraika-single__content a { color: var(--accent); text-decoration: underline; }

.thiraika-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.thiraika-tags a { font-size: 0.78rem; border: 1px solid var(--border); padding: 0.35rem 0.75rem; border-radius: 999px; }
.thiraika-tags a:hover { border-color: var(--accent); color: var(--accent); }

.thiraika-author-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.thiraika-author-box__avatar { border-radius: 50%; width: 48px; height: 48px; }
.thiraika-author-box__name { font-weight: 700; margin-bottom: 0.35rem; }
.thiraika-author-box__bio { color: var(--text-muted); font-size: 0.92rem; }

.thiraika-archive__head { padding-block: 1.5rem; }
.thiraika-archive__title { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.thiraika-archive__description { color: var(--text-muted); margin-top: 0.5rem; }

.thiraika-404 { text-align: center; padding-block: 4rem; }
.thiraika-404__glyph { display: block; font-family: var(--font-display); font-size: 5rem; color: var(--accent); margin-bottom: 1rem; }
.thiraika-404__title { font-size: 1.8rem; margin-bottom: 0.75rem; }
.thiraika-404 .thiraika-search-form { max-width: 420px; margin: 1.5rem auto; justify-content: center; }
.thiraika-404 .thiraika-hero__link { margin-top: 1rem; }

/* ---------------------------------------------------------------------
 * 9. Comments & forms
 * ------------------------------------------------------------------- */
.thiraika-comments { max-width: 720px; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.thiraika-comments__title { font-size: 1.3rem; margin-bottom: 1.5rem; }
.thiraika-comments__list > li { list-style: none; margin-bottom: 1.5rem; }
.comment-body { background: var(--surface); padding: 1.25rem; border: 1px solid var(--border); }
.comment-author .fn { font-weight: 700; }
.comment-metadata { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.children { margin-left: 1.5rem; margin-top: 1rem; }

.thiraika-comment-form p { margin-bottom: 1rem; }
.thiraika-comment-form input[type="text"],
.thiraika-comment-form input[type="email"],
.thiraika-comment-form input[type="url"],
.thiraika-comment-form textarea {
	width: 100%; padding: 0.75rem 1rem; background: var(--surface);
	border: 1px solid var(--border); color: var(--text);
}
.thiraika-comment-form input:focus, .thiraika-comment-form textarea:focus { border-color: var(--accent); }
.thiraika-comment-form .form-submit input {
	background: var(--accent); color: var(--surface); border: 0;
	padding: 0.75rem 1.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.8rem;
}
.thiraika-hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.thiraika-pagination-links { margin-top: 2rem; font-size: 0.85rem; }
.thiraika-pagination-links a { color: var(--accent); text-decoration: underline; margin: 0 0.25rem; }

.pagination, .nav-links { display: flex; justify-content: center; gap: 0.75rem; margin-block: 3rem; font-size: 0.85rem; }
.pagination .page-numbers, .nav-links a { padding: 0.5rem 0.9rem; border: 1px solid var(--border); }
.pagination .page-numbers.current { background: var(--accent); color: var(--surface); border-color: var(--accent); }

/* Back-to-top button: hidden until the visitor scrolls down a bit
   (see main.js), theme-aware colours like everything else. */
.thiraika-back-to-top {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 500;
	width: 48px; height: 48px; border-radius: 14px;
	background: var(--text); color: var(--bg);
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.thiraika-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.thiraika-back-to-top:hover { background: var(--accent); color: #fff; }
.thiraika-back-to-top svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------
 * 10. Responsive breakpoints
 * ------------------------------------------------------------------- */
/* Small landscape phones / large phones: enough room for a first step
   up from the single mobile column, before the tablet breakpoint. */
@media (min-width: 480px) {
	.thiraika-zone__grid--2 { grid-template-columns: repeat(2, 1fr); }
	.thiraika-zone__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.thiraika-zone__grid--4 { grid-template-columns: repeat(2, 1fr); }
	.thiraika-zone__side--mosaic { grid-template-columns: repeat(2, 1fr); }

	/* Bento: 2 columns — big cards still read as "big" (2-wide/2-tall)
	   relative to this smaller grid, without needing the full 4-column
	   desktop layout yet. */
	.thiraika-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
	.thiraika-bento-item--2x1, .thiraika-bento-item--2x2 { grid-column: span 2; }
	.thiraika-bento-item--1x2, .thiraika-bento-item--2x2 { grid-row: span 2; }
}

@media (min-width: 768px) {
	.thiraika-header__datetime { display: flex; }
	.thiraika-social { display: flex; }
	.thiraika-menu-toggle__label { display: inline; }
	.thiraika-search-toggle__label { display: inline; }

	.thiraika-zone__grid--3 { grid-template-columns: repeat(3, 1fr); }
	.thiraika-zone__grid--4 { grid-template-columns: repeat(3, 1fr); }
	.thiraika-zone__grid--split { grid-template-columns: 1.6fr 1fr; }
	.thiraika-spotlight { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
	.thiraika-spotlight__body { padding: 1.5rem 1.5rem 1.5rem 0; justify-content: center; }

	/* minmax(0, 1fr), NOT bare 1fr: a plain 1fr track has an implicit
	   min-width of "auto", which lets wide content inside it (the
	   featured image is a large intrinsic size, e.g. 1400px) force the
	   whole track — and with it the grid, the sidebar, everything —
	   wider than the viewport. minmax(0, 1fr) removes that implicit
	   floor so the track (and the image inside it, via max-width:100%)
	   actually shrinks to fit. This is what was pushing the grid and
	   sidebar off the right edge. Fills all remaining width up to the
	   sidebar either way (no readable-width cap on the content column
	   or the text inside it — see the removed max-width on
	   .thiraika-single__content). */
	.thiraika-single__layout, .thiraika-page__layout { grid-template-columns: minmax(0, 1fr) 300px; }
	.thiraika-footer__top { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

	/* Image is left-aligned and does NOT span the full row (~75% width,
	   988:512 ratio) — the text card sits in the remaining space to its
	   right and only bites into a small percentage of the image's right
	   edge, rather than floating over most of a full-bleed photo. */
	.thiraika-split-slide { position: relative; }
	.thiraika-split-slide__media { width: 75%; aspect-ratio: 988 / 512; }
	.thiraika-split-slide__content {
		position: absolute; top: 1.25rem; right: 0;
		width: 32%; max-height: calc(100% - 2.5rem); overflow: hidden;
		background: var(--surface); box-shadow: var(--shadow);
		padding: 1.25rem 1.5rem;
		justify-content: center;
	}

	.thiraika-hero--split .thiraika-hero-slider__dots {
		overflow-x: visible;
		display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
	}
	.thiraika-hero--split .thiraika-hero-thumb { flex-basis: auto; }
}

@media (min-width: 1024px) {
	/* A little more breathing room between/inside zones once there's
	   enough width for it — matches the generous whitespace typical of
	   editorial news-site grids. */
	:root { --gap: 2rem; }
	.thiraika-zone { padding-block: 3rem; }

	.thiraika-zone__grid--4 { grid-template-columns: repeat(4, 1fr); }

	.thiraika-header__top-inner { padding-block: 1.5rem; }
	.thiraika-logo__glyph { font-size: 2.8rem; }
	.thiraika-logo__word { font-size: 1.75rem; }

	.thiraika-nav { display: block; }
	.thiraika-menu-toggle { display: none; }
	.thiraika-offcanvas { display: none; }

	.thiraika-nav__item.has-submenu { position: relative; }
	.thiraika-nav__item.has-submenu:hover > .thiraika-submenu,
	.thiraika-nav__item.has-submenu:focus-within > .thiraika-submenu { display: block; }
	.thiraika-submenu {
		position: absolute; top: 100%; left: 0; min-width: 200px; z-index: 50;
		background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
		padding: 0.5rem 0;
	}
	.thiraika-submenu a { display: block; padding: 0.6rem 1.25rem; font-size: 0.8rem; }
	.thiraika-submenu-toggle { display: none; }

	/* minmax(0, …) on every flexible track here, not bare 1fr / 1.15fr:
	   same reasoning as .thiraika-single__layout above — the large
	   featured image sitting in the middle track would otherwise force
	   that track past its share and push the whole hero (including the
	   320px "Τελευταία Νέα" column) off the right edge on the homepage. */
	.thiraika-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 320px;
		align-items: center;
	}
	.thiraika-hero__main { order: 1; }
	.thiraika-hero__media { order: 2; aspect-ratio: 16/11; }
	.thiraika-hero__latest { order: 3; border-top: 0; border-left: 1px solid var(--border); padding-top: 0; padding-left: 2rem; align-self: stretch; }

	.thiraika-hero__inner--slider {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: stretch;
	}
	.thiraika-hero__inner--slider .thiraika-hero-slider { order: 1; }
	.thiraika-hero__inner--slider .thiraika-hero__latest {
		order: 2; border-top: 0; border-left: 1px solid var(--border);
		padding-top: 0; padding-left: 2rem;
	}
	.thiraika-hero--slider-latest .thiraika-hero-slider__slide { aspect-ratio: unset; height: 100%; min-height: 420px; }

	.thiraika-hero-slider__arrow--prev { left: 1.5rem; }
	.thiraika-hero-slider__arrow--next { right: 1.5rem; }
	/* The tab strip below adds height to .thiraika-hero-slider itself,
	   so top:50% (measured against the whole flex column) would sit a
	   bit low relative to the image alone — nudge back up to compensate. */
	.thiraika-hero-slider__arrow { top: calc(50% - 24px); }

	/* Renault-style tab strip below the image instead of overlaid dots:
	   same buttons as mobile, just re-skinned + moved out of the image. */
	.thiraika-hero-slider__dots {
		position: static; display: flex; flex-wrap: wrap;
		gap: 1.75rem; background: var(--surface); border-top: 1px solid var(--border);
		padding: 0.9rem 1.75rem;
	}
	.thiraika-hero-slider__dot {
		width: auto; height: auto; max-width: 220px; border-radius: 0; background: transparent;
		padding-bottom: 0.4rem; border-bottom: 2px solid transparent; transform: none;
	}
	.thiraika-hero-slider__dot[aria-current="true"] { background: transparent; border-color: var(--accent); transform: none; }
	.thiraika-hero-slider__dot-label {
		position: static; width: auto; height: auto; overflow: hidden; clip: auto;
		text-overflow: ellipsis; display: block;
		font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
		color: var(--text-muted);
	}
	.thiraika-hero-slider__dot[aria-current="true"] .thiraika-hero-slider__dot-label { color: var(--accent); }

	.thiraika-zone__grid--featured-3 { grid-template-columns: 1.6fr 1fr; align-items: start; }
	.thiraika-zone__side { margin-top: 0; }

	/* mosaic-5 only: 50/50 split (not featured-3's 1.6fr/1fr) so the
	   4-card side block matches the large card's width exactly — each
	   small card then works out to exactly half that, half again for
	   height via the matching 16/10 image ratio. Qualified with
	   .thiraika-zone--mosaic-5 so it doesn't affect the "1 big + 7
	   small" featured-3 zone, which shares the same grid class. */
	.thiraika-zone--mosaic-5 .thiraika-zone__grid--featured-3 { grid-template-columns: 1fr 1fr; }

	.thiraika-zone__grid--3-opinions { grid-template-columns: 2.2fr 1fr; }
	.thiraika-zone__opinions { border-top: 0; padding-top: 0; padding-left: 2rem; border-left: 1px solid var(--border); }

	.thiraika-carousel-wrap { padding-inline: 0.5rem; }
	.thiraika-carousel__arrow { display: flex; }
	.thiraika-carousel__item { flex-basis: 320px; }

	.thiraika-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
}

@media (min-width: 1280px) {
	.thiraika-nav__list { gap: 2.5rem; }
}