/* okitoki-v4 — blog: head band with popular posts, search bar, post grid, pagination,
 * single-post head and "read also". The mock-up has no blog: cards are built from the
 * mock-up's card surface (v-cards) and tokens until Pavlo draws a blog card. */

/* ---------- Head band (listing, category, search) — current-site layout ---------- */
.v-blog-head { padding-bottom: var(--v-space-4xl); }
.v-blog-head__row {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: var(--v-space-lg);
    align-items: start;
    padding-top: var(--v-space-xl);
    color: rgb(var(--v-color-white));
}
.v-blog-head__row--solo { grid-template-columns: minmax(0, 720px); }
.v-blog-head__title { color: inherit; }
.v-blog-head__text { margin-top: var(--v-space-md); font-size: 20px; line-height: 1.56; }
.v-blog-head__text > :last-child { margin-bottom: 0; }
.v-blog-head__social { margin-top: var(--v-space-lg); justify-content: flex-start; gap: 20px; }

.v-blog-popular__heading {
    margin: 0 0 var(--v-space-lg);
    padding-bottom: 8px;
    border-bottom: 2px solid rgb(var(--v-color-white));
    color: rgb(var(--v-color-white));
    font-size: 24px;
    font-weight: var(--v-font-weight-bold);
    line-height: 1.56;
    text-transform: uppercase;
}
.v-blog-popular__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-space-md) var(--v-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}
.v-blog-popular__item {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: var(--v-space-md) 25px;
    align-items: center;
    min-height: 113px;
    padding: var(--v-space-md) var(--v-space-md) var(--v-space-md) 10px;
    border-radius: var(--v-radius);
    background: rgb(var(--v-color-white));
    box-shadow: var(--v-shadow);
    color: rgb(var(--v-color-text));
}
.v-blog-popular__media img {
    display: block;
    width: 105px;
    height: 82px;
    object-fit: contain;
}
.v-blog-popular__body { display: flex; flex-direction: column; gap: var(--v-space-sm); min-width: 0; }
.v-blog-popular__title {
    color: rgb(var(--v-color-black));
    font-weight: var(--v-font-weight-bold);
    line-height: 1.35;
    text-decoration: none;
}
.v-blog-popular__title:hover { color: rgb(var(--v-color-primary)); }

/* "Learn more" link — one look for the head and the cards. */
.v-blog-popular__more,
.v-post-card__more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    align-self: flex-start;
    color: rgb(var(--v-color-primary));
    font-weight: var(--v-font-weight-bold);
}
.v-blog-popular__more:hover,
.v-post-card__more:hover { color: rgb(var(--v-color-accent)); }
.v-blog-popular__more .v-icon,
.v-post-card__more .v-icon { width: 14px; height: 14px; transform: rotate(-90deg); }

/* ---------- Search bar: one white bar, blue category select, input, search icon ---------- */
.v-blog-search {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 64px;
    align-items: stretch;
    min-height: 64px;
    margin-bottom: 56px;
    overflow: hidden;
    border-radius: var(--v-radius);
    background: rgb(var(--v-color-white));
    box-shadow: var(--v-shadow);
}
.v-blog-search__cat {
    position: relative;
    display: flex;
    background: rgb(var(--v-color-primary));
    color: rgb(var(--v-color-white));
}
.v-blog-search__cat select {
    width: 100%;
    padding: 0 48px 0 30px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    appearance: none;
    cursor: pointer;
}
.v-blog-search__cat select option { color: rgb(var(--v-color-text)); }
.v-blog-search__cat .v-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}
.v-blog-search__q { display: flex; }
.v-blog-search__q input {
    width: 100%;
    padding: 0 30px;
    border: 0;
    background: transparent;
    color: rgb(var(--v-color-text));
    font: inherit;
}
.v-blog-search__q input::placeholder { color: rgb(var(--v-color-text-secondary)); }
.v-blog-search :is(select, input, button):focus-visible { outline: none; box-shadow: inset var(--v-focus-ring); }
.v-blog-search__go {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(var(--v-color-text));
    cursor: pointer;
}
.v-blog-search__go:hover { color: rgb(var(--v-color-primary)); }
.v-blog-search__go .v-icon { width: 22px; height: 22px; }

/* ---------- Post grid + card: picture left, text right, "Learn more" and date at the bottom ---------- */
.v-post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}
.v-post-card {
    display: grid;
    grid-template-columns: minmax(0, 303px) minmax(0, 1fr);
    min-height: 215px;
    overflow: hidden;
    border-radius: var(--v-radius);
    background: rgb(var(--v-color-white));
    box-shadow: var(--v-shadow);
}
.v-post-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--v-space-lg);
}
.v-post-card__img {
    display: block;
    width: 100%;
    max-width: 243px;
    height: auto;
    max-height: 175px;
    object-fit: contain;
}
.v-post-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 20px 20px 0;
}
.v-post-card__title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.35;
}
.v-post-card__title a { color: rgb(var(--v-color-black)); text-decoration: none; }
.v-post-card__title a:hover { color: rgb(var(--v-color-primary)); }
.v-post-card__excerpt {
    margin: 0;
    color: rgb(var(--v-color-text-secondary));
    font-size: var(--v-font-size-sm);
    line-height: 1.35;
}
.v-post-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v-space-sm);
    margin-top: auto;
    padding-top: 20px;
}
.v-post-card__date { color: rgb(var(--v-color-primary)); font-size: var(--v-font-size-sm); opacity: .85; }
.v-blog-list__empty { color: rgb(var(--v-color-text-secondary)); text-align: center; }

/* ---------- Pagination ---------- */
.v-pagination { margin-top: var(--v-space-2xl); }
.v-pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--v-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
.v-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--v-space-sm);
    border-radius: 20px;
    color: rgb(var(--v-color-text));
    font-weight: var(--v-font-weight-bold);
    text-decoration: none;
    transition: background-color var(--v-duration) var(--v-timing), color var(--v-duration) var(--v-timing);
}
.v-pagination a.page-numbers:hover { background: rgb(var(--v-color-surface-contrast)); color: rgb(var(--v-color-accent)); }
.v-pagination .page-numbers.current { background: rgb(var(--v-color-primary)); color: rgb(var(--v-color-white)); }
.v-pagination .page-numbers.dots { min-width: 24px; padding: 0; }
.v-pagination .page-numbers .v-icon { width: 16px; height: 16px; }
.v-pagination .prev .v-icon { transform: rotate(90deg); }
.v-pagination .next .v-icon { transform: rotate(-90deg); }

/* ---------- Single post — current-site layout: date, title, lead left; cover right ---------- */
.v-article-head { padding-bottom: var(--v-space-3xl); }
.v-article-head__row {
    display: grid;
    grid-template-columns: minmax(0, 635px) minmax(0, 1fr);
    align-items: start;
    padding-top: var(--v-space-xl);
    color: rgb(var(--v-color-white));
}
.v-article-head__date { display: block; margin-bottom: 5px; font-size: 20px; }
.v-article-head__title { color: inherit; line-height: 1.56; }
.v-article-head__lead { margin: var(--v-space-md) 0 0; font-size: 20px; line-height: 1.56; }
.v-article-head__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 530px;
    object-fit: contain;
}
/* Body column: the current site's reading width (~1090px inside the 1340 box). */
.v-article__wrap { max-width: calc(1090px + 2 * var(--v-space)); }
.v-read-also__heading { margin-bottom: var(--v-space-lg); }
.v-post-grid--stack { grid-template-columns: minmax(0, 800px); gap: var(--v-space-lg); }

/* Article body (PROG-10124 layout, ported): justify long lines, capped centred images,
 * caption under the picture, lighter in-content headings (Google-Docs content, PROG-10255). */
@media (min-width: 768px) {
    .v-article__body :is(p, li) { text-align: justify; hyphens: auto; }
}
.v-article__body img {
    display: block;
    max-width: min(660px, 100%);
    margin: var(--v-space-lg) auto;
    cursor: zoom-in;
}
.v-article__body .wp-caption {
    width: auto;
    max-width: min(660px, 100%);
    margin: var(--v-space-lg) auto;
}
.v-article__body .wp-caption[style] { width: auto !important; } /* WP writes an inline width on [caption] */
.v-article__body .wp-caption img { margin: 0 auto; }
.v-article__body :is(h2, h3, h4, h5, h6) { font-weight: var(--v-font-weight); }

/* Lightbox (assets/blog/lightbox.js). */
.oki-lightbox {
    position: fixed;
    inset: 0;
    z-index: calc(var(--v-z-modal) + 10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--v-space-lg);
    background: rgba(var(--v-color-black), .88);
    opacity: 0;
    transition: opacity var(--v-duration) var(--v-timing);
    cursor: zoom-out;
}
.oki-lightbox.is-open { opacity: 1; }
.oki-lightbox__box { position: relative; max-width: 96vw; max-height: 92vh; }
.oki-lightbox img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 92vh;
    border: 10px solid rgb(var(--v-color-white));
    border-radius: var(--v-radius-sm);
    background: rgb(var(--v-color-white));
}
.oki-lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgb(var(--v-color-border-element));
    border-radius: 50%;
    background: rgb(var(--v-color-white));
    color: rgb(var(--v-color-text));
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.oki-lightbox__close:hover { color: rgb(var(--v-color-primary)); }
body.oki-lightbox-open { overflow: hidden; }

/* Rating card (template-parts/blog-rating.php, own CSS in assets/blog/rating.css). */
.v-article .ot-rate { margin: var(--v-space-2xl) auto 0; }


@media (max-width: 1199.98px) {
    .v-blog-head__row,
    .v-article-head__row { grid-template-columns: 1fr; }
    .v-article-head__media { display: none; }
    .v-post-card { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .v-post-grid,
    .v-post-grid--stack { grid-template-columns: 1fr; }
    .v-blog-search { grid-template-columns: 220px minmax(0, 1fr) 56px; }
}
@media (max-width: 767.98px) {
    .v-blog-head { padding-bottom: var(--v-space-2xl); }
    .v-blog-head__text,
    .v-article-head__lead,
    .v-article-head__date { font-size: var(--v-font-size); }
    .v-blog-popular__list { grid-template-columns: 1fr; }
    .v-blog-search { grid-template-columns: 1fr 56px; }
    .v-blog-search__cat { grid-column: 1 / -1; min-height: 52px; }
    .v-blog-search__q { min-height: 52px; }
    .v-post-card { grid-template-columns: 1fr; }
    .v-post-card__media { padding-bottom: 0; }
    .v-post-card__body { padding: 20px; }
}