/* ===== Homepage: nominee marquee + section background rhythm ===== */

/* ── "Meet the Nominees" marquee ──────────────────────────────────────
   Same auto-scrolling mechanic as kepsa's homepage marquee (three rows,
   alternating direction, paused unless in viewport), restyled in JKA
   gold/black instead of kepsa's blue/gold. Only rendered server-side when
   the upcoming voting-enabled event actually has nominees. */
@keyframes jka-mq-scrollL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes jka-mq-scrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.jka-mq-wrap { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.jka-mq-row {
    overflow: hidden;
    contain: layout style paint;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.jka-mq-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: jka-mq-scrollL 800s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}
.jka-mq-track.rev { animation-name: jka-mq-scrollR; }
.jka-mq-row:hover .jka-mq-track { animation-play-state: paused; }
.jka-mq-row.jka-mq-in-view:not(:hover) .jka-mq-track { animation-play-state: running; }

.jka-mq-card {
    flex: none;
    width: 232px;
    background: #fff;
    border: 1px solid var(--evt-border, #eee);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jka-mq-card:hover {
    border-color: var(--jka-gold);
    box-shadow: 0 12px 30px rgba(var(--jka-gold-rgb), .18);
    transform: translateY(-3px);
    text-decoration: none;
}
.jka-mq-photo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--jka-gold-shine);
    background-size: cover;
    background-position: center;
}
.jka-mq-photo.jka-mq-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}
.jka-mq-info { min-width: 0; display: flex; flex-direction: column; }
.jka-mq-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--jka-ink, #1c1c24);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jka-mq-cat {
    font-size: 11.5px;
    color: var(--jka-gold-dark);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .jka-mq-card { width: 200px; }
}

/* ── Alternating section-background rhythm ────────────────────────────
   Rule: no two homepage sections in a row share the same background
   family. White is the default (no class needed). ".jka-hs-dark" is a
   flat brand-black fill; ".jka-hs-photo" is a real JKA event photo
   (set per-section via inline style="background-image:...", same idiom
   already used on the hero slides) with a dark readability overlay —
   never the vendor's .gradient-bg, which is an actual CSS gradient and
   violates the site's flat-color-only rule. Both variants override the
   vendor's default dark heading/body-text colors, which otherwise assume
   a white section background. */
.jka-hs-dark {
    background: var(--jka-black);
    position: relative;
}
.jka-hs-photo {
    position: relative;
    background-size: cover;
    background-position: center;
}
.jka-hs-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.82) 100%);
    z-index: 0;
}
.jka-hs-photo > .container { position: relative; z-index: 1; }

.jka-hs-dark, .jka-hs-dark p, .jka-hs-dark blockquote,
.jka-hs-photo, .jka-hs-photo p, .jka-hs-photo blockquote {
    color: var(--jka-text);
}
.jka-hs-dark h1, .jka-hs-dark h2, .jka-hs-dark h3, .jka-hs-dark h4,
.jka-hs-photo h1, .jka-hs-photo h2, .jka-hs-photo h3, .jka-hs-photo h4 {
    color: #fff;
}
/* .section-title/.intro-title dark-bg color+pill override now lives with the
   rest of the pill styling in custom.css, to keep one source of truth. */
.jka-hs-dark a, .jka-hs-photo a { color: var(--jka-gold-light); }
.jka-hs-dark a:hover, .jka-hs-photo a:hover { color: var(--jka-gold); }
.jka-hs-dark blockquote, .jka-hs-photo blockquote { border-left-color: var(--jka-gold); }

/* Speaker/pricing cards are already opaque white boxes (vendor .ts-speaker,
   .ts-pricing-box both set background:#fff) — they read fine floating over
   either treatment without extra rules. */

/* .btn-outline-gold (about.css) defaults to a dark gold suited to a white
   section — on the dark/photo sections here that reads as near-invisible,
   so lighten it in that context instead of duplicating the whole class. */
.jka-hs-dark .btn-outline-gold, .jka-hs-photo .btn-outline-gold {
    color: var(--jka-gold-light);
    border-color: var(--jka-gold-light);
}
.jka-hs-dark .btn-outline-gold:hover, .jka-hs-photo .btn-outline-gold:hover {
    background: var(--jka-gold-light);
    color: var(--jka-black);
}

/* ── Upcoming Event spotlight (replaces the old static Intro section) ── */
.jka-spot-banner {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.jka-spot-banner img { width: 100%; height: 420px; object-fit: cover; display: block; }
.jka-spot-banner-fallback {
    height: 420px;
    background: var(--jka-black);
    display: flex;
    align-items: center;
    justify-content: center;
}
.jka-spot-banner-fallback i { font-size: 4.5rem; color: rgba(var(--jka-gold-rgb), .4); }
.jka-spot-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 55%);
}
.jka-spot-banner-info { position: absolute; bottom: 20px; left: 20px; right: 20px; }
.jka-spot-phase {
    background: var(--jka-gold-shine);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}
.jka-spot-banner-date, .jka-spot-banner-venue { color: #fff; font-size: .95rem; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.jka-spot-banner-date i, .jka-spot-banner-venue i { color: var(--jka-gold); margin-right: 6px; }
.jka-spot-banner-venue { color: rgba(255,255,255,.85); font-size: .88rem; margin-top: 2px; }

.jka-spot-tagline { font-size: 1.05rem; color: var(--jka-gold); font-style: italic; margin-bottom: 14px; }
.jka-spot-desc { line-height: 1.8; margin-bottom: 20px; }
.jka-spot-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.jka-spot-badge {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--jka-border);
    color: #fff;
    font-size: .78rem;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 600;
}
.jka-spot-badge i { color: var(--jka-gold); margin-right: 5px; }
.jka-spot-info-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.jka-spot-info-rows div { font-size: .85rem; }
.jka-spot-info-rows i { color: var(--jka-gold); width: 18px; display: inline-block; }
.jka-spot-info-rows strong { color: #fff; }
.jka-spot-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Third CTA — deliberately not a boxed button (see the PHP comment above this
   markup): a plain link keeps it visually subordinate to the one solid and
   one outline button next to it, matching .venu-info-link's existing
   plain-link-with-arrow idiom elsewhere on this page. */
.jka-spot-link { color: var(--jka-gold-light); font-weight: 700; font-size: .92rem; }
.jka-spot-link i { margin-left: 4px; font-size: .8rem; }
.jka-spot-link:hover { color: var(--jka-gold); }

@media (max-width: 767px) {
    .jka-spot-banner img, .jka-spot-banner-fallback { height: 260px; }
}

/* ── Speakers & Presenters ─────────────────────────────────────────────
   Real names only (roster API, or deduped from the schedule's named
   presenters) — replaces the old grid of 8 fake stock headshots with fake
   social-icon links. Opaque white cards float on the section's photo
   background, same as the vendor's own .ts-speaker/.ts-pricing-box cards
   already do elsewhere on this page. */
/* Centered flex row (not CSS grid auto-fill) so 3 cards — or any count that
   doesn't fill a full row — sit centered under the heading instead of
   hugging the left edge with dead space on the right. */
.jka-spk-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.jka-spk-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    transition: transform .15s, box-shadow .15s;
    flex: 1 1 240px;
    max-width: 280px;
}
.jka-spk-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
/* Circular photo, centered at the top of the card with room to breathe —
   a real headshot crops naturally via background-size:cover; initials fall
   back to the same circle filled with a flat accent color + ring. */
.jka-spk-photo {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    margin: 28px auto 0;
    background-size: cover;
    background-position: center top;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
}
.jka-spk-photo.jka-spk-accent-gold  { border-color: var(--jka-gold); }
.jka-spk-photo.jka-spk-accent-red   { border-color: var(--jka-red); }
.jka-spk-photo.jka-spk-accent-green { border-color: var(--jka-green); }
/* No-photo fallback — same diagonal gold-hairline texture already used for
   the blog/nominee placeholder thumbnails (.jka-blog-thumb-pattern), laid
   over the flat accent color instead of a plain flat block. */
.jka-spk-photo-fallback { position: relative; overflow: hidden; }
.jka-spk-photo-fallback::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.14) 0px,
        rgba(255,255,255,.14) 1px,
        transparent 1px,
        transparent 10px
    );
    pointer-events: none;
}
.jka-spk-initials { position: relative; color: #fff; font-weight: 800; font-size: 30px; }
.jka-spk-accent-gold  { background: var(--jka-gold-shine); }
.jka-spk-accent-red   { background: var(--jka-red-shine); }
.jka-spk-accent-green { background: var(--jka-green-shine); }
.jka-spk-body { padding: 16px 20px 24px; }
.jka-spk-name { font-size: 16.5px; font-weight: 700; color: var(--jka-ink, #1c1c24); margin-bottom: 3px; }
.jka-spk-sub { font-size: 13px; color: #6e6a60; line-height: 1.4; margin-bottom: 10px; }
/* Solid fill, not a pale tint — reads as a proper tag/badge instead of
   fading into the white card. */
.jka-spk-role {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
}
.jka-spk-role-gold  { background: var(--jka-gold-shine); }
.jka-spk-role-red   { background: var(--jka-red-shine); }
.jka-spk-role-green { background: var(--jka-green-shine); }
.jka-spk-socials { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.jka-spk-social-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--jka-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.jka-spk-social-icon:hover { background: var(--jka-gold-dark); }
.jka-spk-social-icon img { width: 15px; height: 15px; }
.jka-spk-view-link {
    display: block;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--jka-gold-dark);
}
.jka-spk-view-link:hover { color: var(--jka-gold); }

/* ── Event Programme timeline (replaces the vendor's broken 3-day tabs —
   Bootstrap's own .nav-tabs JS never actually wired up on this page, so
   Day Two/Three never did anything; real JKA data is a single gala night
   anyway, so a day-tab switcher was the wrong shape regardless). Time on
   the left, session content on the right — ported from africa-ai's event
   schedule pattern, in JKA's flat gold/red/green accents instead of
   gradients. */
.jka-tl-wrap { max-width: 820px; margin: 0 auto; }
.jka-tl-day {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--jka-black);
    color: var(--jka-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 8px;
    margin-bottom: 24px;
}
.jka-tl-list { display: flex; flex-direction: column; }
.jka-tl-row { display: grid; grid-template-columns: 100px 1fr; gap: 0; border-bottom: 1px solid var(--jka-offwhite-border); }
.jka-tl-list .jka-tl-row:last-child { border-bottom: none; }
.jka-tl-time { padding: 20px 16px 20px 0; text-align: right; border-right: 2px solid var(--jka-offwhite-border); }
.jka-tl-time-start { font-size: 13px; font-weight: 700; color: var(--jka-ink, #1c1c24); }
.jka-tl-time-end { font-size: 11px; color: var(--evt-text-faint, #9CA3AF); margin-top: 2px; }
.jka-tl-content { padding: 18px 20px; }
.jka-tl-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.jka-tl-accent-gold .jka-tl-type  { color: #fff; background: var(--jka-gold-shine); }
.jka-tl-accent-red .jka-tl-type   { color: #fff; background: var(--jka-red-shine); }
.jka-tl-accent-green .jka-tl-type { color: #fff; background: var(--jka-green-shine); }
.jka-tl-title { font-size: 15.5px; font-weight: 700; color: var(--jka-ink, #1c1c24); margin-bottom: 4px; }
.jka-tl-desc { font-size: 13.5px; color: #6e6a60; line-height: 1.55; }
.jka-tl-chips { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.jka-tl-chip { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; }
.jka-tl-chip-speaker { color: var(--jka-gold-dark); background: rgba(var(--jka-gold-rgb), .1); }
.jka-tl-chip-location { color: var(--jka-green); background: rgba(var(--jka-green-rgb), .08); }
@media (max-width: 575px) {
    .jka-tl-row { grid-template-columns: 78px 1fr; }
    .jka-tl-time { padding: 16px 10px 16px 0; }
    .jka-tl-content { padding: 14px 12px; }
}

/* ── Blog teaser (homepage) ───────────────────────────────────────────────
   Replaces the old vendor .latest-post cards. Centered flex-wrap grid (same
   technique used for .jka-spk-grid / .jka-tix-grid) so it still centers
   correctly with fewer than 3 real posts instead of left-aligning with dead
   space. No-photo fallback reuses .jka-blog-thumb-pattern from blog.css. */
.jka-blog-teaser-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin: 0 auto 36px;
}
.jka-blog-teaser-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 320px;
    max-width: 380px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    transition: transform .2s ease, box-shadow .2s ease;
}
.jka-blog-teaser-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.jka-blog-teaser-media { position: relative; height: 210px; display: block; }
.jka-blog-teaser-media img { width: 100%; height: 100%; object-fit: cover; }
.jka-blog-teaser-media .jka-blog-thumb-pattern { height: 100%; }
.jka-blog-teaser-date {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--jka-black);
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    text-align: center;
    line-height: 1.1;
}
.jka-blog-teaser-date .day { display: block; font-size: 16px; font-weight: 800; color: var(--jka-gold); }
.jka-blog-teaser-date .month { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jka-blog-teaser-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.jka-blog-teaser-cat {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 10px;
}
.jka-blog-teaser-cat.jka-accent-gold  { background: var(--jka-gold-shine); }
.jka-blog-teaser-cat.jka-accent-red   { background: var(--jka-red-shine); }
.jka-blog-teaser-cat.jka-accent-green { background: var(--jka-green-shine); }
.jka-blog-teaser-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 8px;
}
.jka-blog-teaser-title a { color: var(--jka-ink, #1c1c24); text-decoration: none; }
.jka-blog-teaser-card:hover .jka-blog-teaser-title a { color: var(--jka-gold-dark); }
.jka-blog-teaser-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    color: #6e6a60;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Author and reading time given distinct colors (gold for the byline, muted
   grey for the timestamp) so the two pieces of meta don't blur together. */
.jka-blog-teaser-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.jka-blog-teaser-meta-author { color: var(--jka-gold-dark); font-weight: 700; }
.jka-blog-teaser-meta-author i { color: var(--jka-gold); }
.jka-blog-teaser-meta-time { color: var(--evt-text-faint, #9CA3AF); }
.jka-blog-teaser-meta-time i { color: var(--evt-text-faint, #9CA3AF); }
.jka-blog-teaser-meta i { margin-right: 4px; }
.jka-blog-teaser-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.jka-blog-teaser-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--jka-gold-dark);
    text-decoration: none;
}
.jka-blog-teaser-link i { margin-left: 3px; transition: transform .2s ease; }
.jka-blog-teaser-card:hover .jka-blog-teaser-link i { transform: translateX(3px); }

/* Share row — WhatsApp / X + a copy-link button (icon toggles to a
   checkmark on copy, same feedback pattern as nominee.php's share card). */
.jka-blog-teaser-share { display: flex; align-items: center; gap: 6px; }
.jka-blog-teaser-share-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.jka-blog-teaser-share-icon:hover { transform: scale(1.1); }
.jka-blog-teaser-share-icon img { width: 12px; height: 12px; }
.jka-blog-teaser-copy { background: var(--jka-gold-shine); }
.jka-blog-teaser-copy i { color: #fff; font-size: 11px; }
.jka-blog-teaser-copy.copied { background: var(--jka-green-shine); }

/* ── Venue section (homepage) ─────────────────────────────────────────────
   Only rendered once venue_name is real (see index.php) — real map, no
   placeholder styling needed. */
.jka-venue-map-wrap { border-radius: 10px; overflow: hidden; line-height: 0; }
.jka-venue-map-wrap iframe { width: 100%; height: 340px; border: 0; }
@media (max-width: 767px) {
    .jka-venue-map-wrap iframe { height: 240px; }
}
@media (max-width: 575px) {
    .jka-blog-teaser-grid { gap: 20px; }
    .jka-blog-teaser-media { height: 180px; }
}

/* ── Programs teaser (homepage) ───────────────────────────────────────────
   Same card language as the Blog teaser above (photo top, white body,
   rounded corners, lift-on-hover) for visual consistency between the two
   "teaser strip linking to a full page" sections on this page. */
.jka-prog-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin: 0 auto;
}
.jka-prog-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 380px;
    max-width: 460px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}
.jka-prog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    color: inherit;
    text-decoration: none;
}
.jka-prog-photo { height: 220px; }
.jka-prog-photo img { width: 100%; height: 100%; object-fit: cover; }
.jka-prog-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.jka-prog-body h4 { font-size: 19px; font-weight: 800; color: var(--jka-ink, #1c1c24); margin-bottom: 10px; }
.jka-prog-card:hover .jka-prog-body h4 { color: var(--jka-gold-dark); }
.jka-prog-body p { font-size: 13.5px; line-height: 1.7; color: #6e6a60; margin-bottom: 16px; flex: 1; }
.jka-prog-link { font-size: 13px; font-weight: 700; color: var(--jka-gold-dark); }
.jka-prog-link i { margin-left: 3px; transition: transform .2s ease; }
.jka-prog-card:hover .jka-prog-link i { transform: translateX(3px); }
@media (max-width: 575px) {
    .jka-prog-grid { gap: 20px; }
    .jka-prog-photo { height: 180px; }
}

/* ── Gallery teaser (homepage) ────────────────────────────────────────────
   Uniform 4-col photo wall, modeled on ikwa-main-site's gallery-section:
   image tile + a hover overlay that fades/scales in with a logo icon and
   caption. ikwa's version uses a yellow/orange CSS gradient for the overlay
   — this site's flat-color-only rule means a solid brand-black wash instead,
   same interaction, no gradient. */
.jka-home-gal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 36px;
}
.jka-home-gal-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.jka-home-gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.jka-home-gal-item:hover img { transform: scale(1.08); }
.jka-home-gal-overlay {
    position: absolute;
    inset: 14px;
    background: rgba(0, 0, 0, .78);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s ease, transform .3s ease;
}
.jka-home-gal-item:hover .jka-home-gal-overlay { opacity: 1; transform: scale(1); }
.jka-home-gal-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}
.jka-home-gal-icon img { width: 26px; height: 26px; object-fit: contain; }
.jka-home-gal-label { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; }
@media (max-width: 767px) {
    .jka-home-gal-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
    .jka-home-gal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .jka-home-gal-overlay { inset: 8px; padding: 10px; }
    .jka-home-gal-icon { width: 32px; height: 32px; margin-bottom: 8px; }
    .jka-home-gal-icon img { width: 20px; height: 20px; }
    .jka-home-gal-label { font-size: 12px; }
}