/* ============================================================================
   SPECIAL PROGRAM EVENTS — Workshops & Conferences
   ----------------------------------------------------------------------------
   Deliberately NOT scoped to `.wt-home .items-grid` the way the homepage course
   card is. That scoping is why the premium course card cannot be reused outside
   index.php; this stylesheet is written so the same card renders identically on
   the homepage today and on a /workshops/ or /conferences/ listing later, by
   loading this one file.

   Workshop and Conference share EVERY rule. There is no size, spacing, radius,
   shadow or type-scale difference between them — only `.wt-pe-badge` text
   changes, which comes from the database. `.wt-pe-card--workshop` and
   `.wt-pe-card--conference` exist as hooks but intentionally carry no
   layout-affecting declarations, so neither type can drift into looking more
   important than the other.

   RTL: written with logical properties (margin-inline, padding-inline,
   text-align: start) so it inherits `dir="rtl"` from inc/top.php with no
   mirrored overrides and no entry in assets/rtlstyle.css.
   ========================================================================== */

.wt-program-events {
    padding-block: 70px;
    background: #f6f8f9;
}

.wt-program-events .wt-pe-head-row {
    margin-bottom: 34px;
    text-align: center;
}

.wt-program-events .wt-pe-section-title {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
    line-height: 1.25;
    color: #2f4250;
}

.wt-program-events .wt-pe-section-sub {
    margin: 0;
    color: #5f7280;
    font-size: 0.98rem;
}

/* --- Grid ---------------------------------------------------------------
   Nothing here touches alignment. Bootstrap's own `.row` is
   `display:flex; flex-wrap:wrap` with NO justify-content, so it defaults to
   flex-start — and flex-start follows the document direction, which means the
   inline start: left under dir="ltr", right under dir="rtl". One card therefore
   sits where the first course card sits, in both languages, with no logical
   properties needed and no left/right anywhere in this file.

   An earlier revision set `justify-content: center` here so a lone card would
   not look stranded. That was wrong: it made one workshop sit in the middle of
   the row while every other grid on the page starts at the edge. Removed rather
   than conditioned on a count — the native behaviour is already correct for 1,
   2 and 3 cards.

   Only the row gap is kept: Bootstrap's --bs-gutter-y is 0, so without it the
   second row of cards would touch the first. */
.wt-program-events .wt-pe-row {
    row-gap: 26px;
}

.wt-pe-col {
    display: flex;
}

/* --- Card ---------------------------------------------------------------- */
.wt-pe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px 22px 20px;
    border: 1px solid #e3e9ec;
    border-radius: 16px;
    background: #fff;
    /* Clips the top accent line to the rounded corners — the same reason the
       course card sets it. */
    overflow: hidden;
    /* Timing, easing and the three animated properties are taken verbatim from
       .wt-cc in assets/css/wt-home.css so both cards move identically. */
    transition: transform 220ms ease, border-color 220ms ease,
        box-shadow 220ms ease;
}

/* Thin brand accent line, matching the course card: same 3px, same
   --primary-color (set on :root by inc/spStyles.php on every page, so this
   works on a future listing page too), same 0.55 resting opacity brightening
   to 1 on interaction.

   Deliberately NOT keyed to the program type: Workshop and Conference get the
   identical accent, and the badge remains the only thing that distinguishes
   them. */
.wt-pe-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--primary-color, #97bd2e);
    opacity: 0.55;
    transition: opacity 220ms ease;
}

/* The lift is gated on a real pointer. On a touch screen :hover latches after a
   tap and the card would stay raised until the next tap elsewhere; excluding
   touch also removes any chance of a transform-induced layout shift on a 360px
   screen. Keyboard users are covered by the :focus-within rule below, which is
   not gated. */
@media (hover: hover) and (pointer: fine) {
    .wt-pe-card:hover {
        transform: translateY(-5px);
    }
}

/* Border, shadow and accent respond to BOTH hover and keyboard focus, so a
   focused card is as clearly marked as a hovered one. Values copied from
   .wt-cc:hover — no scale, no bounce, no idle animation.

   The resting card carries no shadow, exactly like the course card. That is
   the point: the previous revision had a heavier resting shadow than its hover
   shadow, so hovering made the card look like it sank. */
.wt-pe-card:hover,
.wt-pe-card:focus-within {
    border-color: rgba(20, 33, 40, 0.18);
    box-shadow: 0 10px 26px -14px rgba(20, 33, 40, 0.32);
}

.wt-pe-card:hover::before,
.wt-pe-card:focus-within::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    /* Same posture as the course card: motion is dropped, but the border,
       shadow and accent still mark hover and focus, so the affordance survives
       without any movement. */
    .wt-pe-card,
    .wt-pe-card::before {
        transition: none;
    }

    .wt-pe-card:hover,
    .wt-pe-card:focus-within {
        transform: none;
    }
}

/* --- Badge — the ONLY visual carrier of the program type ----------------- */
.wt-pe-head {
    margin-bottom: 14px;
}

.wt-pe-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: #2f4250;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    /* Arabic has no case distinction and letter-spacing damages its joins. */
    white-space: nowrap;
}

[dir="rtl"] .wt-pe-badge {
    letter-spacing: normal;
    text-transform: none;
}

/* Variant for the dark "our-achievement" band on course_details.php, where the
   default navy badge would be invisible. Colour only — same size, same radius,
   same weight, so a Workshop badge on the course page reads as the same object
   as a Workshop badge on the homepage. */
.wt-pe-badge--on-dark {
    background: #ffffff;
    color: #2f4250;
}

/* Type hooks. Present so a future design tweak has somewhere to live, and
   empty so the two types stay identical until someone deliberately changes
   that. Do not add size, spacing or elevation here. */
.wt-pe-card--workshop {}
.wt-pe-card--conference {}

/* --- Title --------------------------------------------------------------- */
.wt-pe-title {
    margin: 0 0 16px;
    font-size: 1.12rem;
    line-height: 1.45;
    text-align: start;
}

.wt-pe-title a {
    color: #22333f;
    text-decoration: none;
}

.wt-pe-title a:hover,
.wt-pe-title a:focus {
    color: #7fa32a;
    text-decoration: none;
}

/* --- Meta ---------------------------------------------------------------- */
.wt-pe-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 0 20px;
    padding: 16px 0 0;
    border-top: 1px solid #eef2f4;
}

.wt-pe-meta-item {
    min-width: 0;
}

.wt-pe-meta dt {
    margin: 0 0 3px;
    color: #8194a0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: start;
}

[dir="rtl"] .wt-pe-meta dt {
    letter-spacing: normal;
    text-transform: none;
}

.wt-pe-meta dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #34495a;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: start;
}

.wt-pe-meta dd i {
    flex: 0 0 auto;
    color: #7fa32a;
    font-size: 0.95rem;
}

/* The date is the longest string on the card. Wrapping keeps a range such as
   "10 Oct 2026 - 14 Oct 2026" readable on a 360px screen instead of forcing a
   horizontal overflow. */
.wt-pe-meta dd span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* --- Footer / CTA -------------------------------------------------------- */
.wt-pe-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef2f4;
}

.wt-pe-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7fa32a;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    /* A comfortable tap target on touch screens without changing the visual
       height of the row. */
    min-height: 44px;
}

.wt-pe-cta:hover,
.wt-pe-cta:focus {
    color: #5f7c1f;
    text-decoration: none;
}

.wt-pe-cta-arrow {
    transition: transform 0.2s ease;
}

/* The arrow points at the reading direction on both sides. */
[dir="rtl"] .wt-pe-cta-arrow {
    transform: scaleX(-1);
}

.wt-pe-cta:hover .wt-pe-cta-arrow {
    transform: translateX(3px);
}

[dir="rtl"] .wt-pe-cta:hover .wt-pe-cta-arrow {
    transform: scaleX(-1) translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .wt-pe-cta-arrow,
    .wt-pe-cta:hover .wt-pe-cta-arrow {
        transition: none;
    }
}

/* --- "View all" link ----------------------------------------------------- */
.wt-program-events .wt-pe-more {
    margin-top: 34px;
    text-align: center;
}

.wt-program-events .wt-pe-more a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 26px;
    border: 1px solid #cfd9de;
    border-radius: 999px;
    color: #2f4250;
    font-weight: 600;
    text-decoration: none;
}

.wt-program-events .wt-pe-more a:hover,
.wt-program-events .wt-pe-more a:focus {
    border-color: #7fa32a;
    color: #5f7c1f;
    text-decoration: none;
}

/* --- Small screens ------------------------------------------------------- */
@media (max-width: 767.98px) {
    .wt-program-events {
        padding-block: 48px;
    }

    .wt-pe-card {
        padding: 20px 18px 16px;
    }

    .wt-pe-title {
        font-size: 1.06rem;
    }
}

/* Below ~400px a two-column meta grid squeezes the date into 3–4 wrapped
   lines. One column per item is shorter overall and stays legible. */
@media (max-width: 399.98px) {
    .wt-pe-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}