/*
 * Hydari theme — the blog's pages (spec 4.27): the head of the blog or of a category (its icon and colour), the categories as a navigation
 * with their colours, and the badge of each kind on the cards. The cards, filters, featured items and paging are the theme's own. Colours
 * come from the palette tokens (a category's own colour only tints its chip, its mark and the head's glow); directions are logical.
 *
 * Look (after P44): the head is a block with a coloured glow and a large mark; the categories sit in one soft capsule where a pill glides
 * under the pointer (kit.js); the entries stand two a row as lifted cards whose picture zooms on hover, and come in one after another.
 */

.hy-blog { --hy-blog-tone: var(--hy-blog-color, var(--color-accent, var(--color-primary))); display: block; }

/* ---- the head --------------------------------------------------------------------------------------------------------------------- */
.hy-blog .hy-list-head--blog:not(.hy-list-head--quiet) { --hy-head-glow: 100% 0%; padding: clamp(.85rem, 2vw, 1.3rem);
    background: radial-gradient(90% 160% at var(--hy-head-glow), color-mix(in srgb, var(--hy-blog-tone) 20%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--hy-blog-tone) 5%, var(--bg-card)), var(--bg-card)); }
[dir="rtl"] .hy-blog .hy-list-head--blog:not(.hy-list-head--quiet) { --hy-head-glow: 0% 0%; }
.hy-blog .hy-list-head--blog .hy-list-head__mark { inline-size: 54px; block-size: 54px; border-radius: 17px; background: var(--hy-blog-tone); color: var(--bg-card); box-shadow: 0 12px 26px -14px var(--hy-blog-tone); }
.hy-blog .hy-list-head--blog .hy-list-head__mark .hy-icon { inline-size: 24px; block-size: 24px; }
.hy-list-head--blog .hy-list-head__eyebrow { display: inline-flex; align-items: center; gap: .35rem; }
.hy-list-head--blog .hy-list-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hy-blog .hy-list-head--blog .hy-list-head__title { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
.hy-list-head--tinted { border-inline-start: 4px solid var(--hy-blog-color, var(--color-primary)); }
.hy-blog__icon { display: none; }
.hy-blog .hy-list-head__meta a { color: inherit; }

/* ---- the categories: one capsule, the current filled with its colour ------------------------------------------------------------------ */
.hy-blog-nav { margin-block: 0 clamp(.75rem, 1.6vw, 1.1rem); }
/* (2026-10-29) One bar: the categories at the start, the filters and the view switch at the end of the same line; an opened filter
   panel takes the whole width under them. */
.hy-blog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin-block-end: clamp(.85rem, 1.8vw, 1.2rem); }
.hy-blog-bar > .hy-blog-nav { flex: 0 1 auto; min-inline-size: 0; margin: 0; }
.hy-blog-bar > .hy-list-tools { flex: 0 0 auto; align-items: center; margin: 0; margin-inline-start: auto; }
.hy-blog-bar > .hy-list-tools:has(details[open]) { flex-basis: 100%; }
.hy-blog-bar .hy-filters__more > summary { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 44px; padding: 0 1rem; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent);
    border-radius: 999px; background: var(--bg-card); font-weight: 700; font-size: .88rem; transition: background-color .2s var(--hy-ease), border-color .2s var(--hy-ease); }
.hy-blog-bar .hy-filters__more > summary:hover, .hy-blog-bar .hy-filters__more[open] > summary { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hy-blog-bar .hy-filters__form { padding: 1rem; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 18px; background: var(--bg-card); }
.hy-blog-nav ul { display: inline-flex; flex-wrap: wrap; gap: 2px; max-inline-size: 100%; margin: 0; padding: 4px; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 22px;
    list-style: none; background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-app)); }
.hy-blog-nav .hy-chip { gap: .45rem; min-block-size: 36px; padding: .3rem .85rem; border: 0; border-radius: 999px; background: transparent; color: var(--hy-muted); font-size: .85rem; font-weight: 600;
    transition: color .2s var(--hy-ease), background-color .2s var(--hy-ease); }
.hy-blog-nav .hy-chip:hover { color: var(--hy-text); }
.hy-blog-nav__chip .hy-icon, .hy-blog-nav__dot { color: var(--hy-blog-color, var(--color-primary)); }
.hy-blog-nav__dot { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: currentColor; flex: none; }
.hy-blog-nav .hy-chip.is-current { background: var(--hy-blog-color, var(--color-primary)); color: var(--color-on-primary, #fff); box-shadow: 0 8px 18px -10px var(--hy-blog-color, var(--color-primary)); }
.hy-blog-nav .hy-chip.is-current .hy-icon, .hy-blog-nav .hy-chip.is-current .hy-blog-nav__dot { color: inherit; }
.hy-blog-nav .hy-chip__count { display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: .3rem; border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent); font-size: .7rem; font-variant-numeric: tabular-nums; }

/* ---- tools (filters, list / grid) ---------------------------------------------------------------------------------------------------- */
.hy-blog .hy-list-tools { margin-block-end: clamp(.75rem, 1.6vw, 1.1rem); }

/* ---- the entries: two a row, lifted cards, the picture zooms, the title takes the colour ----------------------------------------------- */
@media (min-width: 992px) {
    .hy-blog .hy-list--list:not([data-hy-switchable]), html:not([data-hy-view="grid"]) .hy-blog .hy-list--list[data-hy-switchable] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.hy-blog .hy-list { --hy-gap: clamp(.75rem, 1.6vw, 1.1rem); gap: var(--hy-gap); }
.hy-blog .hy-card { border-color: color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 20px; background: var(--bg-card);
    transition: transform .3s cubic-bezier(.3, 1.25, .5, 1), box-shadow .3s var(--hy-ease), border-color .3s var(--hy-ease); }
.hy-blog .hy-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hy-blog-tone) 35%, var(--hy-line)); box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--hy-blog-tone) 80%, transparent); }
.hy-blog .hy-card:hover .hy-card__media img { transform: scale(1.06); }
.hy-blog .hy-card--list { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.hy-blog .hy-card--list .hy-card__media { align-self: stretch; block-size: auto; min-block-size: 9rem; aspect-ratio: auto; margin: .55rem; margin-inline-end: 0; border-radius: 14px; }
.hy-blog .hy-card__title { font-size: 1rem; line-height: 1.5; }
.hy-blog .hy-card:hover .hy-card__title a { color: var(--color-primary-text, var(--color-primary)); }
.hy-blog .hy-card__excerpt { font-size: .86rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hy-blog .hy-card__more { border-radius: 999px; }
@media (max-width: 575.98px) {
    .hy-blog .hy-card--list { grid-template-columns: minmax(0, 1fr); }
    .hy-blog .hy-card--list .hy-card__media { aspect-ratio: 16 / 9; margin: .5rem .5rem 0; min-block-size: 0; }
    .hy-blog-nav ul { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; scrollbar-width: none; }
    .hy-blog-nav li { flex: none; }
}

/* ---- entrance: the cards come in one after another (once, on the first view) ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .hy-blog .hy-list > .hy-card { animation: hy-blog-in .55s cubic-bezier(.2, .9, .3, 1) backwards; }
    .hy-blog .hy-list > .hy-card:nth-child(2) { animation-delay: .05s; }
    .hy-blog .hy-list > .hy-card:nth-child(3) { animation-delay: .1s; }
    .hy-blog .hy-list > .hy-card:nth-child(4) { animation-delay: .15s; }
    .hy-blog .hy-list > .hy-card:nth-child(5) { animation-delay: .2s; }
    .hy-blog .hy-list > .hy-card:nth-child(n + 6) { animation-delay: .25s; }
}
@keyframes hy-blog-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* =====================================================================
   The blog as a magazine (2026-10-29, round 9): a slim rail of the
   categories (icon tiles, the current one filled with its colour, the
   feed at its foot), the main column — a large lead card with two cards
   beside it, three under them, then the list — and a side column of the
   categories with counts and the feed's card.
   ===================================================================== */
.hy-bmag { --bm-gold: var(--color-accent, #a98b4f); --bm-line: color-mix(in srgb, var(--hy-line) 65%, transparent); display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(14rem, 17.5rem);
    gap: clamp(.9rem, 2vw, 1.5rem); align-items: start; margin-block-start: 1rem; padding: clamp(.6rem, 1.4vw, 1rem); border-radius: 28px; background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-app)); border: 1px solid var(--bm-line); }
.hy-bmag--plain:not(:has(.hy-bmag__rail)) { grid-template-columns: minmax(0, 1fr) minmax(14rem, 17.5rem); }
.hy-bmag .hy-bmag__rail { position: sticky; inset-block-start: calc(var(--hy-header-sticky, 0px) + 1rem); margin: 0; padding: .5rem .35rem; border-radius: 22px; background: var(--bg-raised, var(--bg-card)); border: 1px solid var(--bm-line); }
.hy-bmag__rail ul { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.hy-bmag__rail-end { margin-block-start: .5rem; padding-block-start: .5rem; border-block-start: 1px solid var(--bm-line); }
.hy-bmag__rail-link { --c: var(--hy-blog-color, var(--color-primary)); display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%; color: var(--hy-muted); background: color-mix(in srgb, var(--c) 8%, transparent);
    text-decoration: none; transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.hy-bmag__rail-link:hover { background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); transform: scale(1.06); }
.hy-bmag__rail-link.is-current { background: var(--c); color: rgb(255 255 255); box-shadow: 0 8px 16px -10px var(--c); }
.hy-bmag__rail-link .hy-icon { inline-size: 19px; block-size: 19px; }
.hy-bmag__rail-initial { font-size: .9rem; font-weight: 800; }
.hy-bmag__main { display: grid; gap: 1rem; min-inline-size: 0; }
.hy-bmag__tools { margin: 0; }
.hy-bmag__top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; }
.hy-bmag__lead .hy-card { border-radius: 22px; overflow: hidden; }
.hy-bmag__main .hy-featured, .hy-bmag__main .hy-feat { margin: 0; }
.hy-bmag__lead .hy-card__media { --hy-ratio: 16/10 !important; }
.hy-bmag__lead .hy-card__title { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.hy-bmag__beside { display: grid; gap: 1rem; align-content: stretch; }
.hy-bmag__beside .hy-card { border-radius: 20px; }
.hy-bmag__beside .hy-card__media { inline-size: 6.5rem; flex: none; border-radius: 14px; overflow: hidden; }
.hy-bmag__beside .hy-card__excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
.hy-bmag__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hy-bmag__row .hy-card { border-radius: 20px; }
.hy-bmag__row .hy-card__excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
/* the side column */
.hy-bmag__side { position: sticky; inset-block-start: calc(var(--hy-header-sticky, 0px) + 1rem); display: grid; gap: 1rem; min-inline-size: 0; }
.hy-bmag__box { padding: .9rem; border-radius: 22px; background: var(--bg-raised, var(--bg-card)); border: 1px solid var(--bm-line); }
.hy-bmag__box-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: .98rem; font-weight: 800; }
.hy-bmag__box-title .hy-icon { inline-size: 30px; block-size: 30px; padding: 7px; border-radius: 10px; background: color-mix(in srgb, var(--bm-gold) 14%, transparent); color: color-mix(in srgb, var(--bm-gold) 85%, #000); }
.hy-bmag__cats { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.hy-bmag__cat { --c: var(--hy-blog-color, var(--color-primary)); display: flex; align-items: center; gap: .65rem; padding: .35rem .5rem .35rem .35rem; border-radius: 14px; color: inherit; font-size: .86rem; font-weight: 700; text-decoration: none; background: none; }
.hy-bmag__cat:hover, .hy-bmag__cat.is-current { background: color-mix(in srgb, var(--c) 10%, transparent); }
.hy-bmag__cat-face { display: grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: .84rem; font-weight: 800; }
.hy-bmag__cat-face .hy-icon { inline-size: 16px; block-size: 16px; }
.hy-bmag__cat-name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hy-bmag__cat-count { display: grid; place-items: center; min-inline-size: 1.6rem; block-size: 1.6rem; padding-inline: .4rem; border-radius: 999px; background: var(--c); color: rgb(255 255 255); font-size: .7rem; font-weight: 800; }
.hy-bmag__promo { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: .45rem; padding: 1.1rem; border-radius: 22px; color: rgb(255 255 255); text-decoration: none;
    background: radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--bm-gold) 35%, transparent), transparent 60%), linear-gradient(150deg, var(--color-primary, #46704f), color-mix(in srgb, var(--color-dark, #223829) 85%, #000)); }
.hy-bmag__promo-art { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='.8'%3E%3Cpath d='M20 2l18 18-18 18L2 20z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 26px 26px, rgb(255 255 255 / .1); color: var(--bm-gold); }
.hy-bmag__promo-art .hy-icon { inline-size: 2.4rem; block-size: 2.4rem; }
.hy-bmag__promo-title { font-size: 1.02rem; font-weight: 800; }
.hy-bmag__promo-text { color: rgb(255 255 255 / .8); font-size: .8rem; line-height: 1.5; }
.hy-bmag__promo-btn { display: inline-flex; align-items: center; justify-self: start; gap: .4rem; padding: .4rem .9rem; border-radius: 999px; background: var(--bm-gold); color: var(--color-dark, #223829); font-size: .8rem; font-weight: 800; }
.hy-bmag__promo-btn .hy-icon { inline-size: 15px; block-size: 15px; }
@media (max-width: 1199.98px) { .hy-bmag { grid-template-columns: 4rem minmax(0, 1fr); } .hy-bmag__side { grid-column: 2; position: static; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
@media (max-width: 767.98px) {
    .hy-bmag { grid-template-columns: minmax(0, 1fr); padding: .5rem; }
    .hy-bmag .hy-bmag__rail { position: static; overflow-x: auto; }
    .hy-bmag__rail ul { flex-direction: row; }
    .hy-bmag__rail-end { margin: 0; padding: 0 0 0 .5rem; border: 0; }
    .hy-bmag__side { grid-column: 1; }
    .hy-bmag__top, .hy-bmag__row { grid-template-columns: minmax(0, 1fr); }
}
/* The lead featured card: the picture grows with the card, so no gap stands between it and the words. */
.hy-bmag .hy-featured-list .hy-card--big { display: flex; flex-direction: column; }
.hy-bmag .hy-featured-list .hy-card--big .hy-card__media { flex: 1 1 auto; min-block-size: 16rem; aspect-ratio: auto; }
.hy-bmag .hy-featured-list .hy-card--big .hy-card__media :is(picture, img, .hy-card__ph) { block-size: 100%; object-fit: cover; }
.hy-bmag .hy-featured-list .hy-card--big .hy-card__body { flex: none; }