/* ============================================================
   theme1 public site shell + component system
   ------------------------------------------------------------
   Aligned with the istt.ir visual language: flat surfaces, small radii
   (8–12px), generous whitespace, muted-grey metadata, boxed "see more"
   tiles, clean white header and a sectioned footer. The brand stays the
   CMS blue (tokens.css defines --brand-main and friends).

   Only the PUBLIC (user-side) pages load this; the dashboard is never
   themed. All values reference the design tokens in tokens.css so the
   palette/radii/shadows can be changed in ONE place.
   ============================================================ */

/* ---------- page frame ---------- */
.iv-site {
    /* NOTE: do NOT set font-family here. ``rtl.css`` sets
       ``html body { font-family: font-primary, ... }`` (the IRANSansX webfont);
       a class selector would win over that element selector and clobber it.
       The family is owned by ``rtl.css`` and exposed as ``--font-family``. */
    color: var(--ink);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: var(--line-height);
}

.iv-main { flex: 1 0 auto; padding: var(--space-6) 0 var(--space-7); min-height: 40vh; }

/* ---------- utility top strip ---------- */
.iv-topstrip {
    background: var(--brand-main-dark);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
}
.iv-topstrip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
    flex-wrap: wrap;
}
.iv-topstrip a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.iv-topstrip a:hover { color: #fff; }
.iv-topstrip__links { display: flex; align-items: center; gap: var(--space-4); }
.iv-topstrip__lang { border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-sm); padding: 0 .5rem; }

/* ---------- header ---------- */
.iv-header {
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.iv-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 76px;
}
.iv-brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.iv-brand:hover { color: var(--brand-main); }
.iv-brand__logo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    background: var(--brand-main);
    color: #fff;
    font-size: 1.25rem;
}
.iv-brand__text { display: flex; flex-direction: column; line-height: 1.35; }
.iv-brand__text strong { font-size: 1.05rem; color: var(--ink); font-weight: 800; }
.iv-brand__subtitle { color: var(--muted); font-size: .72rem; }

/* ---------- nav ---------- */
.iv-nav { margin-inline-start: auto; }
.iv-nav__list, .iv-nav__submenu { list-style: none; margin: 0; padding: 0; }
.iv-nav__list { display: flex; align-items: center; gap: .25rem; }
.iv-nav__item { position: relative; }
.iv-nav__parent { display: flex; align-items: center; }
.iv-nav__link {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--ink-2);
    text-decoration: none;
    padding: .55rem .8rem;
    font-size: .93rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.iv-nav__link:hover { color: var(--brand-main); border-bottom-color: var(--brand-main); background: transparent; }
.iv-nav__icon { font-size: .9rem; }
.iv-nav__toggle {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: .25rem .35rem;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.iv-nav__toggle:hover { background: var(--surface-alt); color: var(--brand-main); }
.iv-nav__toggle .fa-chevron-down { font-size: .6rem; transition: transform .2s ease; }
.iv-nav__item--parent.is-open > .iv-nav__parent .fa-chevron-down { transform: rotate(180deg); }

/* dropdowns */
.iv-nav__item--parent > .iv-nav__submenu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 220px;
    padding: .4rem 0;
    margin-top: .25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 1050;
}
.iv-nav__item--parent:hover > .iv-nav__submenu,
.iv-nav__item--parent.is-open > .iv-nav__submenu { display: block; }
.iv-nav__submenu .iv-nav__link { color: var(--ink-2); border-bottom: 0; }
.iv-nav__submenu .iv-nav__link:hover { background: var(--surface-alt); color: var(--brand-main); }
.iv-nav__submenu .iv-nav__item--parent > .iv-nav__submenu {
    top: 0;
    inset-inline-start: 100%;
    margin-top: 0;
}

.iv-navtoggle {
    display: none;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    padding: .35rem .6rem;
    margin-inline-start: auto;
}

/* ---------- footer ---------- */
.iv-footer { background: var(--brand-main-dark); color: rgba(255, 255, 255, .82); margin-top: var(--space-7); }
.iv-footer__heading { color: #fff; text-align: center; padding: var(--space-5) 0 .5rem; margin: 0; font-weight: 800; }
.iv-footer__section { padding: var(--space-4) 0; }
.iv-footer__section-title { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: .5rem; margin-bottom: var(--space-4); font-weight: 700; }
.iv-footer__col { margin-bottom: var(--space-4); }
.iv-footer__col-title { color: #fff; margin-bottom: .6rem; font-weight: 700; }
.iv-footer__item { margin-bottom: .45rem; font-size: .9rem; }
.iv-footer__link { color: rgba(255, 255, 255, .82); text-decoration: none; }
.iv-footer__link:hover { color: #fff; }
.iv-footer__img { max-height: 50px; }
.iv-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: var(--space-4) 0;
    font-size: .82rem;
    text-align: center;
}

/* ---------- responsive nav ---------- */
@media (max-width: 991.98px) {
    .iv-navtoggle { display: inline-flex; align-items: center; }
    .iv-nav { display: none; position: absolute; inset-inline: 0; top: 76px; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem .75rem 1rem; z-index: 1040; box-shadow: var(--shadow); }
    .iv-nav.iv-open { display: block; }
    .iv-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .iv-nav__item--parent > .iv-nav__submenu { position: static; display: none; box-shadow: none; border: 0; margin: 0; padding-inline-start: .75rem; }
    .iv-nav__item--parent.is-open > .iv-nav__submenu { display: block; }
}
/* ============================================================
   Content area — theme the CMS plugin output on public pages.

   ``base.html`` wraps the placeholder in ``.container.iv-content`` so plugin
   markup gets the container max-width + gutter. Only the public render
   templates emit these classes (``page_builder_app/cms_plugins.py``:
   ``render_template`` = ``*_frontend.html`` / ``text.html``); the dashboard
   ``*_dashboard.html`` change-form variants are untouched.
   ============================================================ */
.iv-content { line-height: var(--line-height); }

/* Card surface for the plugins that sit DIRECTLY in the placeholder.
   ``banner``/``statistics`` are deliberately excluded — they own their own
   full-width band styling (``.iv-banner`` / ``.iv-stats``). */
.iv-content > .text-plugin,
.iv-content > .custom-video-plugin,
.iv-content > .custom-file-plugin,
.iv-content > .advanced-form-plugin,
.iv-content > .slider-plugin,
.iv-content > .gallery-plugin,
.iv-content > img,
.iv-content > figure {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

/* ---- text plugin ---- */
.iv-content .text-plugin { color: var(--ink); font-size: 1rem; }
.iv-content .text-plugin > :last-child { margin-bottom: 0; }
.iv-content .text-plugin p { margin-bottom: 1rem; }
.iv-content .text-plugin h1,
.iv-content .text-plugin h2,
.iv-content .text-plugin h3,
.iv-content .text-plugin h4 {
    color: var(--brand-main);
    font-weight: 800;
    margin: 0 0 .8rem;
    line-height: 1.5;
}
.iv-content .text-plugin a { color: var(--brand-main); text-decoration: none; }
.iv-content .text-plugin a:hover { text-decoration: underline; color: var(--brand-main-dark); }
.iv-content .text-plugin blockquote {
    border-inline-start: 4px solid var(--brand-main);
    background: var(--brand-main-light);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    margin: 0 0 1rem;
    color: var(--brand-main-dark);
}
.iv-content .text-plugin img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ---- picture plugin ---- */
.iv-content img.img-fluid { max-width: 100%; height: auto; border-radius: var(--radius); }
.iv-content picture,
.iv-content figure { display: block; }
.iv-content figcaption { color: var(--muted); font-size: .85rem; margin-top: .5rem; }

/* ---- video plugin ---- */
.iv-content .custom-video-plugin { width: 100%; }
.iv-content .custom-iframe-wrapper { position: relative; width: 100%; }
.iv-content .custom-iframe-wrapper iframe,
.iv-content .custom-iframe-wrapper video { max-width: 100%; border-radius: var(--radius); }
.iv-content .custom-iframe-wrapper iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* ---- file / download plugin ---- */
.iv-content .custom-file-plugin { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.iv-content .custom-file-plugin .btn-outline-primary { border-radius: var(--radius-sm); }

/* ---- buttons (istt-style flat, small radius) ---- */
.btn { border-radius: var(--radius-sm); font-weight: 600; }
.btn-primary { background-color: var(--brand-main); border-color: var(--brand-main); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--brand-main-dark); border-color: var(--brand-main-dark); }
.btn-outline-primary { color: var(--brand-main); border-color: var(--brand-main); }
.btn-outline-primary:hover { background-color: var(--brand-main-light); color: var(--brand-main-dark); }

/* ---- generic cards (blog latest-posts, bootstrap card, istt-style) ---- */
.iv-content .card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.iv-content .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand-main-light); }
.iv-content .card-img-top { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
/* Blog cards: consistent 768×480 framing for the generated-thumbnail-first cover. */
.iv-content .blog-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 768 / 480;
    object-fit: cover;
}
.iv-content .blog-card-img--empty { aspect-ratio: 768 / 480; }
.iv-content .card-title { color: var(--ink); font-weight: 700; }
.iv-content .card-text { color: var(--muted); }
.iv-content .card-footer { color: var(--muted-2); }

/* ---- blog latest-posts wrapper ---- */
.iv-content .blog-latest-posts { padding: var(--space-5); }
.iv-content .blog-latest-posts h3 { color: var(--brand-main); font-weight: 800; }

/* ---- statistics / counter plugin ---- */
.statistics-plugin { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--brand-main); color: #fff; }
.statistics-plugin .statistics-title { color: inherit; text-align: center; margin: 0 0 1.25rem; font-weight: 800; }
.statistics-plugin .stat-item { text-align: center; padding: .5rem 0; }
.statistics-plugin .stat-icon { font-size: 2rem; color: var(--brand-gold); margin-bottom: .35rem; }
.statistics-plugin .stat-number { font-size: 2rem; font-weight: 800; line-height: 1.2; }
.statistics-plugin .stat-suffix { font-size: 1.25rem; margin-inline-start: .15rem; }
.statistics-plugin .stat-label { margin: .35rem 0 0; font-size: .95rem; opacity: .9; }

/* ---- multimedia tabs (djangocms_frontend.contrib.tabs) ---- */
/* ---- video gallery plugin ---- */
.video-gallery-plugin .video-gallery-title { color: var(--brand-main); font-weight: 800; margin: 0 0 1rem; }
.video-gallery-grid { display: grid; }
.video-gallery-item { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: start; cursor: pointer; }
.video-gallery-item__thumb {
    display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
    background-color: var(--brand-main-dark); background-size: cover; background-position: center;
    border-radius: var(--radius); overflow: hidden;
}
.video-gallery-item__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 1.6rem; color: #fff; background: rgba(0, 0, 0, .28);
    transition: background .15s ease;
}
.video-gallery-item:hover .video-gallery-item__play { background: rgba(20, 81, 164, .55); }
.video-gallery-item__caption { display: block; margin-top: .5rem; font-size: .9rem; color: var(--ink); }
.video-gallery-modal { position: fixed; inset: 0; z-index: 1055; display: grid; place-items: center; }
.video-gallery-modal[hidden] { display: none; }
.video-gallery-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.video-gallery-modal__dialog { position: relative; width: min(900px, 92%); background: #000; border-radius: var(--radius); overflow: hidden; }
.video-gallery-modal__player { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-gallery-modal__player video,
.video-gallery-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-gallery-modal__close { position: absolute; top: .4rem; inset-inline-end: .6rem; z-index: 2; background: transparent; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }

@media (max-width: 992px) {
    .video-gallery-grid { grid-template-columns: repeat(var(--vg-tablet, 2), 1fr) !important; }
}
@media (max-width: 576px) {
    .video-gallery-grid { grid-template-columns: repeat(var(--vg-mobile, 1), 1fr) !important; }
}

/* ============================================================
   Full-bleed hero region — ``{% placeholder "hero" %}`` in base.html.

   Sits OUTSIDE ``.container`` (unlike ``.iv-content``) so plugins dropped
   here render edge-to-edge instead of as a max-width card. A page may use
   both the hero and the regular ``content`` placeholder; when the hero
   placeholder is empty it collapses to zero height.
   ============================================================ */
.iv-hero { width: 100%; }
.iv-hero:not(:has(*)) { display: none; }
.iv-hero > * { margin: 0; }

/* Strip the container/card chrome from plugins placed in the hero band. */
.iv-hero .banner-plugin,
.iv-hero .slider-plugin,
.iv-hero .gallery-plugin { border: 0; border-radius: 0; box-shadow: none; }
.iv-hero .banner-plugin .banner-content { border-radius: 0; }

/* Small screens: tighten the content padding so cards don't crowd the gutter. */
@media (max-width: 575.98px) {
    .iv-main { padding: var(--space-5) 0 var(--space-6); }
    .iv-content > .text-plugin,
    .iv-content > .custom-video-plugin,
    .iv-content > .custom-file-plugin,
    .iv-content > .advanced-form-plugin,
    .iv-content > .slider-plugin,
    .iv-content > .gallery-plugin,
    .iv-content > .banner-plugin,
    .iv-content > .statistics-plugin,
    .iv-content > img,
    .iv-content > figure { padding: var(--space-4); }
}

.iv-tabs { border-bottom: 2px solid var(--brand-main); gap: .25rem; margin-bottom: 1rem; }
.iv-tabs .nav-link { color: var(--brand-main); border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-weight: 600; padding: .6rem 1.1rem; }
.iv-tabs .nav-link:hover { background: var(--brand-main-light); }
.iv-tabs .nav-link.active { background: var(--brand-main); color: #fff; }
.iv-tabs-content { padding: .5rem 0; }

/* ============================================================
   Component system — istt-aligned blocks driven by the theme overrides
   under ``themes/theme1/templates/`` (banner, statistics, card, posts,
   gallery, video tiles). All values come from tokens.css.
   ============================================================ */

/* ---- section heading (istt: accent bar + title + optional "see more") ---- */
.iv-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}
.iv-section-title {
    position: relative;
    margin: 0;
    padding-inline-start: var(--space-3);
    font-family: var(--font-extrabold);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--ink);
    line-height: 1.6;
}
.iv-section-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.1em;
    border-radius: var(--radius-pill);
    background: var(--brand-main);
}
.iv-section-head__more {
    margin-inline-start: auto;
    color: var(--brand-main);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.iv-section-head__more:hover { color: var(--brand-main-dark); }

/* ---- hero banner (``.iv-banner``) ----
   Full-bleed band matching istt's slider: tall image, gradient scrim, caption. */
.iv-banner {
    position: relative;
    width: 100%;
    background-color: var(--brand-main);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.iv-banner__content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 480px;
    padding: var(--space-7) 0;
    color: #fff;
}
/* Gradient scrim so white text stays legible over any image. */
.iv-banner__content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 40, 78, .82) 0%, rgba(18, 40, 78, .45) 55%, rgba(18, 40, 78, .12) 100%);
}
[dir="rtl"] .iv-banner__content::before {
    background: linear-gradient(270deg, rgba(18, 40, 78, .82) 0%, rgba(18, 40, 78, .45) 55%, rgba(18, 40, 78, .12) 100%);
}
.iv-banner__inner { position: relative; z-index: 1; }
.iv-banner__text { max-width: min(720px, 92%); }
.iv-banner__title {
    font-family: var(--font-extrabold);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    line-height: 1.5;
    margin: 0 0 var(--space-5);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}
.iv-banner__cta {
    border-radius: var(--radius-sm);
    padding: .7rem 1.6rem;
    font-weight: 700;
    box-shadow: var(--shadow);
}
@media (max-width: 575.98px) {
    .iv-banner__content { min-height: 360px; padding: var(--space-6) 0; }
    .iv-banner__text { max-width: 100%; }
}

/* ---- counters band (``.iv-stats``) ---- */
.iv-stats {
    background: var(--brand-main);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    margin-bottom: var(--space-5);
}
.iv-stats__title {
    color: inherit;
    text-align: center;
    margin: 0 0 var(--space-5);
    font-family: var(--font-extrabold);
    font-weight: 800;
}
.iv-stat { text-align: center; padding: var(--space-2) 0; }
.iv-stat__icon { font-size: 2rem; color: var(--brand-gold); margin-bottom: var(--space-2); }
.iv-stat__number {
    font-family: var(--font-extrabold);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
}
.iv-stat__number .stat-suffix { font-size: .62em; margin-inline-start: .1rem; }
.iv-stat__label {
    margin: var(--space-2) 0 0;
    font-size: .95rem;
    opacity: .92;
}

/* ---- card tiles (``.iv-card``) ---- */
.iv-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.iv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-main-light);
}
.iv-card__img { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); object-fit: cover; }
.iv-card--media .iv-card__img { height: 170px; width: 100%; }
.iv-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.iv-card--tile { text-align: center; }
.iv-card--tile .iv-card__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-height: 170px; justify-content: center; }
.iv-card__title { font-family: var(--font-bold); font-weight: 700; color: var(--ink); margin: 0; font-size: 1.02rem; }
.iv-card__subtitle { color: var(--muted-2); }
.iv-card__text { color: var(--muted); font-size: .9rem; margin: .35rem 0 0; }
.iv-card__text p { margin: 0; }
.iv-card__btn { margin-top: var(--space-3); border-radius: var(--radius-sm); }

/* ---- shared public bits (``.iv-avatar`` / ``.iv-breadcrumb`` / ``.iv-pagination``) ----
   Used by the blog list, category landing and article templates (and the shared
   ``partials/*`` partials), so any public theme can restyle them in one place. */
.iv-avatar {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-main-light);
    color: var(--brand-main-dark);
    font-family: var(--font-bold);
    font-size: .8rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.iv-breadcrumb { margin-bottom: var(--space-4); }
.iv-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .86rem;
    color: var(--muted);
}
.iv-breadcrumb__item + .iv-breadcrumb__item::before { content: '/'; color: var(--muted-2); }
.iv-breadcrumb__item a { color: var(--brand-main); text-decoration: none; }
.iv-breadcrumb__item a:hover { text-decoration: underline; }
.iv-breadcrumb__item--active { color: var(--ink); font-family: var(--font-medium); }
.iv-pagination { margin-top: var(--space-5); }
.iv-pagination__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.iv-pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    text-decoration: none;
    font-size: .88rem;
}
.iv-pagination__link:hover { border-color: var(--brand-main); color: var(--brand-main); }
.iv-pagination__item--active .iv-pagination__link {
    background: var(--brand-main);
    border-color: var(--brand-main);
    color: #fff;
}

/* ---- news cards (``.iv-posts`` / ``.iv-post``) ---- */
.iv-posts { padding: var(--space-5); }
.iv-post {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.iv-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-main-light); }
.iv-post__media { display: block; overflow: hidden; }
.iv-post__img { height: 180px; width: 100%; object-fit: cover; }
.iv-post__body { padding: var(--space-4) var(--space-5); }
.iv-post__date {
    display: inline-block;
    font-size: .78rem;
    color: var(--muted-2);
    background: var(--surface-alt);
    border-radius: var(--radius-pill);
    padding: .15rem .7rem;
    margin-bottom: var(--space-2);
}
.iv-post__title { font-family: var(--font-bold); font-size: 1.02rem; margin: 0 0 var(--space-2); line-height: 1.7; }
.iv-post__title a { color: var(--ink); text-decoration: none; }
.iv-post__title a:hover { color: var(--brand-main); }
.iv-post__excerpt { color: var(--muted); font-size: .88rem; margin: 0; }
.iv-post__footer {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    padding: var(--space-3) var(--space-5);
    font-size: .82rem;
    color: var(--muted-2);
}
.iv-post__more { color: var(--brand-main); font-weight: 600; text-decoration: none; }
.iv-post__more:hover { color: var(--brand-main-dark); }

/* ---- gallery (``.iv-gallery``) ---- */
.iv-gallery__item { position: relative; overflow: hidden; border-radius: var(--radius); }
.iv-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.iv-gallery__item a:hover img { transform: scale(1.03); }
.iv-gallery__caption { margin-top: var(--space-2); font-size: .82rem; color: var(--muted); }
.iv-gallery__download {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}
.iv-gallery__item:hover .iv-gallery__download { opacity: 1; }
.iv-gallery__download:hover { background: rgba(0, 0, 0, .9); }

/* ---- video tiles (``.iv-vtile``) ---- */
.iv-vtile__thumb { background-color: var(--brand-main-dark); }
.iv-vtile__caption { color: var(--ink); }