/* UN visual enhancement layer (P7-visual) — additive only; does not restyle the WP theme. */

/* Repair: js_composer's waypoint reveal never initialises in the static clone, so
   .wpb_animate_when_almost_visible content stays stuck at opacity:0 (the blank
   mid-page band). Force it visible as the reliable baseline. */
.wpb_animate_when_almost_visible { opacity: 1 !important; }

/* Scroll reveal — only engages when JS is active (html.un-js hook), so no-JS
   visitors always see content (progressive enhancement). */
html.un-js .un-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--un-delay, 0ms);
  will-change: opacity, transform;
}
html.un-js .un-reveal.is-visible { opacity: 1; transform: none; }

/* Hover lift for cards + clear focus affordance. */
.un-lift { transition: transform .18s ease, box-shadow .18s ease; }
.un-lift:hover,
.un-lift:focus-within { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(31, 0, 72, .18); }

/* Mandatory: respect reduced-motion — no transforms/transitions, reveal at once. */
@media (prefers-reduced-motion: reduce) {
  html.un-js .un-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .un-lift { transition: none !important; }
  .un-lift:hover, .un-lift:focus-within { transform: none !important; }
  .un-hero-slide { transition: none !important; }
}


/* Service cards (home "Our Accreditation Services") — consistent radius/shadow + hover lift. */
.un-card { border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(31,0,72,.08); transition: transform .18s ease, box-shadow .18s ease; height: 100%; }
.un-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(31,0,72,.18); }
@media (prefers-reduced-motion: reduce) { .un-card, .un-card:hover { transition: none !important; transform: none !important; } }

/* ============================================
   FIX 2 (2026-05-29): Home "What is Accreditation" — owl-carousel replaced with
   a static, all-visible grid. The 3 .radiantthemes-timeline-item blocks now lay
   out as cards (image banner on top, date/title/text below). No copy changed:
   only the slider wrapper class was swapped to .un-wia-grid and .un-reveal added.
   owl-carousel + timeline JS/CSS were removed from wp_style.php (home-only use).
   ============================================ */
.un-wia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 8px;
}
.un-wia-grid .radiantthemes-timeline-item {
    background: var(--bg-surface, #fff);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(31, 0, 72, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}
.un-wia-grid .radiantthemes-timeline-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(31, 0, 72, .18);
}
/* stagger the reveal (un-reveal reads --un-delay for transition-delay) */
.un-wia-grid .radiantthemes-timeline-item:nth-child(2) { --un-delay: 90ms; }
.un-wia-grid .radiantthemes-timeline-item:nth-child(3) { --un-delay: 180ms; }
/* stack the vendor pic/data columns vertically inside each card */
.un-wia-grid .row { display: flex; flex-direction: column; margin: 0; }
.un-wia-grid [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
.un-wia-grid .table, .un-wia-grid .table-cell { display: block; width: auto; }
.un-wia-grid .matchHeight { height: auto !important; }
/* image banner (the blank vendor placeholder img is hidden; bg-image div sized) */
.un-wia-grid .radiantthemes-timeline-item-pic-holder { position: relative; }
.un-wia-grid .radiantthemes-timeline-item-pic-holder > img { display: none; }
.un-wia-grid .radiantthemes-timeline-item-pic-main {
    position: relative !important;
    display: block;
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
}
/* card body */
.un-wia-grid .radiantthemes-timeline-item-data { padding: 20px 22px 24px; }
.un-wia-grid .radiantthemes-timeline-item-data .date {
    display: inline-block;
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--brand-primary, #330072); margin: 0 0 8px;
}
.un-wia-grid .radiantthemes-timeline-item-data .title {
    font-size: 17px; line-height: 1.35; margin: 0 0 10px;
    color: var(--text-primary, #1F1611); font-weight: 700;
}
.un-wia-grid .radiantthemes-timeline-item-data p {
    font-size: 14px; line-height: 1.6; color: var(--text-secondary, #6B5440); margin: 0 0 10px;
}
.un-wia-grid .radiantthemes-timeline-item-data p:last-child { margin-bottom: 0; }
@media (max-width: 980px) { .un-wia-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .un-wia-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .un-wia-grid .radiantthemes-timeline-item,
    .un-wia-grid .radiantthemes-timeline-item:hover { transition: none !important; transform: none !important; }
}

/* ============================================
   FIX 3 (2026-05-29): the three home hero tile captions sit on the purple
   "Affiliation" band but carry an inline color:var(--brand-primary) — purple on
   purple, effectively invisible. Force white (+ a soft dark glow so they stay
   legible even where a caption overlaps the cream/purple seam). Scoped to the
   three unique vc_custom caption classes so no other .vc_custom_heading changes.
   !important beats the inline color. (hero_tile_1/2/3 in wp-clone/home.php.)
   ============================================ */
.vc_custom_1701525809258,
.vc_custom_1701525822205,
.vc_custom_1701525835725 {
    color: #ffffff !important;
    text-shadow: 0 1px 10px rgba(31, 0, 72, .45);
}