/* ============================================================================
   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 ---------------------------------------------------------------
   Bootstrap columns (col-lg-4 / col-md-6 / col-12) already give 3 / 2 / 1.
   `justify-content: center` is the only addition: with one or two cards the
   row would otherwise hug the inline-start edge and look truncated. With three
   it is a no-op, so a full row is unaffected. */
.wt-program-events .wt-pe-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 26px;
}

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

/* --- Card ---------------------------------------------------------------- */
.wt-pe-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px 22px 20px;
    border: 1px solid #e3e9ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 60, 82, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wt-pe-card:hover,
.wt-pe-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(31, 60, 82, 0.13);
}

@media (prefers-reduced-motion: reduce) {
    .wt-pe-card,
    .wt-pe-card:hover,
    .wt-pe-card:focus-within {
        transform: none;
        transition: 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;
    }
}