/* ==========================================================
   cert-entry.css — JYL Certifications Entry (v3.9.0)
   Homepage entry-point block: a partial preview of the About
   page's certificate wall (flowing marquee of cert images) with
   a CTA into the full wall. Two-column layout: copy + CTA on one
   side, a shortened certificate marquee on the other.
   ========================================================== */

/* ---- Palette (tone-scoped, mirrors the About widget's system) ---- */

.jyl-cert-entry {
    --ce-ink: var(--jyl-grey-dark);
    --ce-ink-soft: var(--jyl-grey-light);
    --ce-surface: var(--jyl-white);
    --ce-surface-2: var(--jyl-beige-xlight);
    --ce-line: rgba(0, 0, 0, .12);
    --ce-gap: 14px;
    --ce-fade: 22%;
    --ce-marquee-h: 440px;
    --ce-speed: 50s;

    position: relative;
    overflow: hidden;
    background: var(--ce-surface);
    color: var(--ce-ink);
    font-family: var(--jyl-font);
}

/* Dark tone (explicit widget setting). NOTE: Elementor's prefix_class lands
   on the widget's own wrapper element (an ANCESTOR of .jyl-cert-entry, two
   levels up), never on .jyl-cert-entry itself. A custom property declared
   directly on an element always wins over the same property inherited from
   an ancestor, no matter the ancestor selector's specificity — so this rule
   must explicitly re-target .jyl-cert-entry as a descendant, not rely on
   .jyl-cert-entry-tone--dark alone (which would silently be masked by the
   plain .jyl-cert-entry block above declaring the same variables on itself). */
.jyl-cert-entry-tone--dark .jyl-cert-entry {
    --ce-ink: var(--jyl-white);
    --ce-ink-soft: rgba(255, 255, 255, .68);
    --ce-surface: var(--jyl-black);
    --ce-surface-2: #111214;
    --ce-line: rgba(255, 255, 255, .16);
}

/* Auto-invert a "light" tone widget when the whole site is in dark mode,
   same behaviour as .jyl-about. A "dark" tone widget is already dark and
   needs no further inversion. Same descendant-targeting requirement as
   above. */
html.jyl-dark .jyl-cert-entry-tone--light .jyl-cert-entry {
    --ce-ink: var(--jyl-white);
    --ce-surface: #0c0c0e;
    --ce-surface-2: #111214;
    --ce-line: rgba(255, 255, 255, .14);
}

.jyl-cert-entry *,
.jyl-cert-entry *::before,
.jyl-cert-entry *::after {
    box-sizing: border-box;
}

/* ---- Full-bleed (break out of a centred theme container) ---- */

.jyl-fullbleed--yes .jyl-cert-entry {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ---- Two-column layout ---- */

.jyl-cert-entry__wrap {
    display: grid;
    grid-template-columns: 1fr var(--ce-marquee-fr, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 72px);
}

/* Both grid items need min-width:0 — CSS Grid items default to
   min-width:auto (their content's intrinsic min-content size as a floor),
   which lets wide un-shrunk content (e.g. a horizontal row of certificate
   images, each auto-width, before flex/overflow have a chance to shrink
   them) force its 1fr track wider than intended, pushing the whole layout
   past the viewport instead of staying inside its half of the grid. This is
   what let the marquee side grow rightward off-screen as Columns/Rows
   increased, rather than staying confined to its column. */
.jyl-cert-entry__text,
.jyl-cert-entry__marquee {
    min-width: 0;
}

/* Swap column order when Text Column = Right (desktop only). Elementor's
   order:-1 on the marquee also changes which grid track it auto-places
   into (order affects grid auto-placement, not just paint order) — so the
   ratio must swap track position too, or "Marquee Width Ratio" would size
   the wrong physical column when Text Column = Right. */
.jyl-cert-entry-textpos--right .jyl-cert-entry__marquee {
    order: -1;
}
.jyl-cert-entry-textpos--right .jyl-cert-entry__wrap {
    grid-template-columns: var(--ce-marquee-fr, 1fr) 1fr;
}

/* ---- Text column ---- */

.jyl-cert-entry__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.jyl-cert-entry .eyebrow {
    display: block;
    margin-bottom: 14px;
    font-family: var(--jyl-font);
    font-size: 64px;
    font-weight: var(--jyl-fw-bold);
    line-height: var(--jyl-lh-tight);
    letter-spacing: normal;
    text-transform: none;
    color: var(--jyl-grey-dark);
}

.jyl-dark .jyl-cert-entry .eyebrow,
.jyl-cert-entry-tone--dark .jyl-cert-entry .eyebrow {
    color: var(--jyl-white) !important;
}

.jyl-cert-entry__heading {
    margin: 0 0 14px;
    max-width: 20ch;
    font-size: var(--jyl-fs-32);
    font-weight: var(--jyl-fw-medium);
    line-height: var(--jyl-lh-snug);
    color: var(--jyl-grey-dark);
}
.jyl-dark .jyl-cert-entry__heading {
    color: var(--jyl-white) !important;
}
.jyl-cert-entry-tone--dark .jyl-cert-entry__heading {
    color: var(--jyl-white) !important;
}

.jyl-cert-entry__subtext {
    margin: 0;
    max-width: 46ch;
    font-size: var(--jyl-fs-16);
    line-height: var(--jyl-lh-relaxed);
    color: var(--ce-ink-soft);
}
.jyl-dark .jyl-cert-entry__subtext,
.jyl-cert-entry-tone--dark .jyl-cert-entry__subtext {
    color: rgba(255, 255, 255, .68) !important;
}

/* ---- Stat figure ---- */

.jyl-cert-entry__stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-top: 28px;
    padding-left: 18px;
    border-left: 2px solid var(--jyl-blue);
}

.jyl-cert-entry__stat-num {
    font-size: var(--jyl-fs-32);
    font-weight: var(--jyl-fw-bold);
    color: var(--ce-ink);
}
.jyl-dark .jyl-cert-entry__stat-num,
.jyl-cert-entry-tone--dark .jyl-cert-entry__stat-num {
    color: var(--jyl-white) !important;
}

.jyl-cert-entry__stat-label {
    margin-top: 2px;
    font-size: var(--jyl-fs-12);
    color: var(--ce-ink-soft);
}
.jyl-dark .jyl-cert-entry__stat-label,
.jyl-cert-entry-tone--dark .jyl-cert-entry__stat-label {
    color: rgba(255, 255, 255, .68) !important;
}

/* ---- Button (pill, blue accent) ---- */

.jyl-cert-entry__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 14px 28px;
    border-radius: var(--jyl-radius-full);
    background-color: var(--jyl-blue);
    color: var(--jyl-white);
    font-family: var(--jyl-font);
    font-size: var(--jyl-fs-14);
    font-weight: var(--jyl-fw-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition-property: background-color, color, border-color, transform;
    transition-timing-function: var(--jyl-ease);
    transition-duration: var(--jyl-t200);
}

.jyl-cert-entry__btn svg {
    flex-shrink: 0;
    transition: transform var(--jyl-t200) var(--jyl-ease);
}

.jyl-cert-entry__btn:hover { background-color: var(--jyl-blue-light); }
.jyl-cert-entry__btn:hover svg { transform: translateX(3px); }
.jyl-cert-entry__btn:active { transform: scale(.97); }

/* ---- Certificate marquee (partial preview of the About wall) ----
   Two orientations, selected by a modifier class on .jyl-cert-entry__marquee:
   --vertical (default): .jyl-cert-entry__cols lays columns side by side,
       each column scrolls up/down.
   --horizontal: .jyl-cert-entry__cols stacks rows top to bottom, each row
       scrolls left/right. The same .col/--up/--down class names are reused
       for structure; --left/--right modifiers drive the horizontal motion. */

.jyl-cert-entry__marquee {
    position: relative;
    height: var(--ce-marquee-h);
    overflow: hidden;
    will-change: transform;
}

.jyl-cert-entry__marquee--vertical {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--ce-fade), #000 calc(100% - var(--ce-fade)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--ce-fade), #000 calc(100% - var(--ce-fade)), transparent);
}

.jyl-cert-entry__marquee--horizontal {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ce-fade), #000 calc(100% - var(--ce-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--ce-fade), #000 calc(100% - var(--ce-fade)), transparent);
}

.jyl-cert-entry__marquee--vertical .jyl-cert-entry__cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ce-gap);
    height: 100%;
}

.jyl-cert-entry__marquee--horizontal .jyl-cert-entry__cols {
    display: flex;
    flex-direction: column;
    gap: var(--ce-gap);
    height: 100%;
}

/* Vertical: each .col is a column, items stack top-to-bottom, full width. */
.jyl-cert-entry__marquee--vertical .jyl-cert-entry__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--ce-gap);
    will-change: transform;
    animation: jylCeDown var(--ce-speed, 50s) linear infinite;
}
.jyl-cert-entry__marquee--vertical .jyl-cert-entry__col--up   { animation-name: jylCeUp; }
.jyl-cert-entry__marquee--vertical .jyl-cert-entry__col--down { animation-name: jylCeDown; }
.jyl-cert-entry__marquee--vertical .jyl-cert-entry__thumb {
    flex: 0 0 auto;
    width: 100%;
}
.jyl-cert-entry__marquee--vertical .jyl-cert-entry__thumb img {
    width: 100%;
    height: auto;
}

/* Horizontal: each .col is a row, items sit left-to-right, sized by height. */
.jyl-cert-entry__marquee--horizontal .jyl-cert-entry__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    gap: var(--ce-gap);
    height: 100%;
    min-width: 0;
    will-change: transform;
    animation: jylCeLeft var(--ce-speed, 50s) linear infinite;
}
.jyl-cert-entry__marquee--horizontal .jyl-cert-entry__col--left  { animation-name: jylCeLeft; }
.jyl-cert-entry__marquee--horizontal .jyl-cert-entry__col--right { animation-name: jylCeRight; }
.jyl-cert-entry__marquee--horizontal .jyl-cert-entry__thumb {
    flex: 0 0 auto;
    height: 100%;
}
.jyl-cert-entry__marquee--horizontal .jyl-cert-entry__thumb img {
    height: 100%;
    width: auto;
}

.jyl-cert-entry-pause--yes .jyl-cert-entry__marquee:hover .jyl-cert-entry__col {
    animation-play-state: paused;
}

@keyframes jylCeUp    { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes jylCeDown  { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes jylCeLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes jylCeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.jyl-cert-entry__thumb {
    position: relative;
    display: block;
    padding: var(--ce-frame-pad, 10px);
    border: 1px solid var(--ce-line);
    background: var(--ce-frame-color, #F8F8F8);
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: border-color var(--jyl-t300) var(--jyl-ease), transform var(--jyl-t300) var(--jyl-ease), box-shadow var(--jyl-t300) var(--jyl-ease);
}

.jyl-cert-entry__thumb img {
    display: block;
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, .08);
}

.jyl-cert-entry__thumb:hover {
    border-color: var(--jyl-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* Corner registration marks — a small on-brand detail (echoes a technical
   drawing's corner marks) rather than a generic photo-frame drop shadow.
   Toggleable via the "Corner Accents" control (prefix_class, default on). */
.jyl-cert-entry-corners--yes .jyl-cert-entry__thumb::before,
.jyl-cert-entry-corners--yes .jyl-cert-entry__thumb::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    transition: border-color var(--jyl-t300) var(--jyl-ease);
}
.jyl-cert-entry-corners--yes .jyl-cert-entry__thumb::before {
    top: 4px;
    left: 4px;
    border-top: 2px solid var(--jyl-blue);
    border-left: 2px solid var(--jyl-blue);
}
.jyl-cert-entry-corners--yes .jyl-cert-entry__thumb::after {
    bottom: 4px;
    right: 4px;
    border-bottom: 2px solid var(--jyl-blue);
    border-right: 2px solid var(--jyl-blue);
}

/* ---- Graceful fallback when no certificate images are available (sync
   found nothing and the manual gallery is empty too) — the text column
   takes the full width instead of leaving an empty right column. ---- */

.jyl-cert-entry--no-marquee .jyl-cert-entry__wrap {
    grid-template-columns: 1fr;
}
.jyl-cert-entry--no-marquee .jyl-cert-entry__text {
    max-width: 640px;
}

/* ---- Responsive ---- */

@media (max-width: 991px) {
    .jyl-cert-entry__wrap,
    .jyl-cert-entry-textpos--right .jyl-cert-entry__wrap {
        grid-template-columns: 1fr;
    }
    .jyl-cert-entry-textpos--right .jyl-cert-entry__marquee {
        order: 0;
    }
    .jyl-cert-entry__text {
        align-items: flex-start;
    }
}

/* Title size ladder — matches the theme convention used by
   fullscreen-hero.css / auto-sliding-hero.css (64 -> 48 -> 36). */
@media (max-width: 897px) {
    .jyl-cert-entry .eyebrow { font-size: var(--jyl-fs-48); }
    .jyl-cert-entry__heading { font-size: var(--jyl-fs-24); }
}
@media (max-width: 597px) {
    .jyl-cert-entry .eyebrow { font-size: 36px; }
    .jyl-cert-entry__heading { font-size: var(--jyl-fs-20); }
}