/* ===========================
   PROGRAMS — FULL-WIDTH SHOWCASE
=========================== */
.programs-section { background: #fff7f6; padding: 60px 0; }
.programs-section--archive { padding-top: 40px; }
/* ── Homepage: 2-column grid ── */
.programs-section:not(.programs-section--archive) .programs-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.programs-section:not(.programs-section--archive) .showcase-item {
    height: 280px;
}
@media (max-width: 1024px) and (orientation: portrait) {
    .programs-section:not(.programs-section--archive) .programs-showcase {
        grid-template-columns: 1fr;
    }
    .programs-section:not(.programs-section--archive) .showcase-item {
        height: 260px;
    }
}

/* ── Showcase container ── */
.programs-showcase {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Showcase item ── */
.showcase-item {
    position: relative;
    height: 320px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
}

/* ── Background layer ── */
.showcase-item__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.showcase-item.is-visible .showcase-item__bg {
    opacity: 1;
}

/* ── Image with Ken Burns effect ── */
.showcase-item__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.showcase-item:hover .showcase-item__img {
    transform: scale(1.08);
}

/* Inner zoom div */
.showcase-item__zoom {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-image: inherit;
}

/* ── Fallback (no image) ── */
.showcase-item__img--fallback {
    opacity: 0.9;
}

/* ── Directional gradient overlay ── */
.showcase-item__gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.showcase-item--left .showcase-item__gradient {
    background: linear-gradient(to right, rgba(10,20,40,0.3) 0%, rgba(10,20,40,0.15) 40%, rgba(10,20,40,0.0) 70%, transparent 100%);
}

.showcase-item--right .showcase-item__gradient {
    background: linear-gradient(to left, rgba(10,20,40,0.3) 0%, rgba(10,20,40,0.15) 40%, rgba(10,20,40,0.0) 70%, transparent 100%);
}

/* Homepage only: improve text contrast over bright pillar images */
.programs-section:not(.programs-section--archive) .showcase-item--left .showcase-item__gradient {
    background: linear-gradient(
        to right,
        rgba(7, 16, 31, 0.68) 0%,
        rgba(7, 16, 31, 0.48) 46%,
        rgba(7, 16, 31, 0.12) 78%,
        transparent 100%
    );
}

.programs-section:not(.programs-section--archive) .showcase-item--right .showcase-item__gradient {
    background: linear-gradient(
        to left,
        rgba(7, 16, 31, 0.68) 0%,
        rgba(7, 16, 31, 0.48) 46%,
        rgba(7, 16, 31, 0.12) 78%,
        transparent 100%
    );
}

.programs-section:not(.programs-section--archive) .showcase-item__title,
.programs-section:not(.programs-section--archive) .showcase-item__excerpt,
.programs-section:not(.programs-section--archive) .showcase-item__btn {
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
}

/* Archive only: improve text contrast over bright pillar images */
.programs-section--archive .showcase-item--left .showcase-item__gradient {
    background: linear-gradient(
        to right,
        rgba(7, 16, 31, 0.68) 0%,
        rgba(7, 16, 31, 0.48) 46%,
        rgba(7, 16, 31, 0.12) 78%,
        transparent 100%
    );
}

.programs-section--archive .showcase-item--right .showcase-item__gradient {
    background: linear-gradient(
        to left,
        rgba(7, 16, 31, 0.68) 0%,
        rgba(7, 16, 31, 0.48) 46%,
        rgba(7, 16, 31, 0.12) 78%,
        transparent 100%
    );
}

.programs-section--archive .showcase-item__title,
.programs-section--archive .showcase-item__excerpt,
.programs-section--archive .showcase-item__btn {
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
}

/* ── Content layer ── */
.showcase-item__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

/* LTR: all cards keep text on the left regardless of --left/--right side */
.showcase-item--left .showcase-item__content,
.showcase-item--right .showcase-item__content {
    justify-content: flex-start;
}

/* ── Inner content box ── */
.showcase-item__inner {
    max-width: 480px;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Individual elements hidden for staggered animation */
.showcase-item__title,
.showcase-item__excerpt,
.showcase-item__btn {
    opacity: 0;
}

.showcase-item--left .showcase-item__inner {
    text-align: left;
}

.showcase-item--right .showcase-item__inner {
    text-align: left;
}

/* ── Scroll reveal animations ── */
@keyframes showcaseRevealLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes showcaseRevealRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Title — appears first */
.showcase-item.is-visible.showcase-item--left .showcase-item__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: showcaseRevealLeft 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}
.showcase-item.is-visible.showcase-item--right .showcase-item__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: showcaseRevealRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* Excerpt — appears second */
.showcase-item.is-visible.showcase-item--left .showcase-item__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: showcaseRevealLeft 1s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}
.showcase-item.is-visible.showcase-item--right .showcase-item__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: showcaseRevealRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

/* Button — appears last */
.showcase-item.is-visible .showcase-item__btn {
    animation: showcaseRevealLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

/* ── Icon ── */
.showcase-item__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.showcase-item__icon svg {
    width: 32px;
    height: 32px;
    stroke: rgba(255, 255, 255, 0.9);
    fill: none;
    stroke-width: 1.5;
}

/* ── Number fallback ── */
.showcase-item__number {
    font-size: 56px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.15);
    line-height: 1;
    letter-spacing: -2px;
    font-family: 'Inter', sans-serif;
}

/* ── Title ── */
.showcase-item__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── Excerpt ── */
.showcase-item__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Button ── */
.showcase-item__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 22px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    align-self: flex-start;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.1);
    margin-top: 4px;
}

.showcase-item__btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    gap: 12px;
}

.showcase-item__btn svg {
    stroke: #ffffff;
    fill: none;
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.showcase-item__btn:hover svg {
    transform: translateX(4px);
}

.showcase-item--right .showcase-item__btn {
    align-self: flex-start;
}

.showcase-item--right .showcase-item__btn:hover svg {
    transform: translateX(-4px);
}

/* ── Section footer ── */
.section-footer { text-align: center; margin-top: 32px; }
.programs-empty { text-align: center; color: var(--gray-600); padding: 40px 0; font-size: 16px; }

/* ── RTL support ── */
/* In RTL flex the main axis is reversed: flex-start = right side physically.
   Using flex-start here keeps Arabic text on the RIGHT for all cards.        */
[dir="rtl"] .showcase-item--left .showcase-item__content,
[dir="rtl"] .showcase-item--right .showcase-item__content { justify-content: flex-start; }
[dir="rtl"] .showcase-item__inner                         { text-align: right; }
/* In column flex with RTL direction, cross-axis flex-start = right side      */
[dir="rtl"] .showcase-item__btn                           { align-self: flex-start; }
[dir="rtl"] .showcase-item__btn:hover svg                 { transform: scaleX(-1) translateX(-4px); }

/* ── Responsive: landscape ≤1024px ── */
@media (max-width: 1024px) and (orientation: landscape) {
    .showcase-item { height: 300px; border-radius: 8px; }
    .showcase-item__inner { max-width: 380px; padding: 28px 32px; }
    .showcase-item__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; font-size: 22px; }
    .programs-showcase { gap: 14px; }
}

/* ── Responsive: portrait ≤1024px ── */
@media (max-width: 1024px) and (orientation: portrait) {
    .showcase-item { height: 260px; border-radius: 8px; }
    .showcase-item__inner { max-width: 100%; padding: 24px 20px; }
    .showcase-item__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; font-size: 20px; }
    .showcase-item__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; -webkit-line-clamp: 2; }
    .showcase-item--left .showcase-item__content,
    .showcase-item--right .showcase-item__content { justify-content: flex-start; }
    .showcase-item__gradient { background: linear-gradient(to bottom, transparent 0%, rgba(10,20,40,0.5) 50%, rgba(10,20,40,0.9) 100%) !important; }
    .showcase-item__content { align-items: flex-end !important; }
    .showcase-item__inner { text-align: left !important; }
    .showcase-item__btn { align-self: flex-start !important; }
    .programs-showcase { gap: 14px; }
}

@media (max-width: 1024px) and (orientation: portrait) {
    [dir="rtl"] .showcase-item__inner { text-align: right !important; }
}

/* ===========================
   PROGRAMS ARCHIVE HERO
=========================== */
.programs-archive-hero {
    background: linear-gradient(135deg, #1D3557 0%, #2B6CB0 100%);
    text-align: center;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 100px;
    padding-bottom: 56px;
}
.programs-archive-hero .section-tag { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.25); }
.programs-archive-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: var(--white);
    margin: 12px 0;
    letter-spacing: -0.5px;
}
.programs-archive-desc {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ===========================
   SINGLE PROGRAM — HERO
=========================== */
.single-program { padding-top: 0; }

.program-hero {
    position: relative;
    min-height: 380px;
    background-color: var(--navy);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding-top: 80px;
}
.program-hero__overlay { position: absolute; inset: 0; }
.program-hero__content { position: relative; z-index: 1; padding-bottom: 48px; }
.program-hero__icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
}
.program-hero__icon svg { width: 30px; height: 30px; color: var(--white); }
.program-hero__title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    color: var(--white);
    margin: 0 0 20px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.program-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 100px;
    padding: 6px 16px;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.1);
}
.program-hero__back:hover { color: var(--white); background: rgba(255,255,255,0.2); }

/* ===========================
   SINGLE PROGRAM — STATS STRIP
=========================== */
.program-stats-strip { padding: 48px 0; }
.program-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.program-stat-item {
    text-align: center;
    padding: 24px 20px;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.program-stat-item:last-child { border-right: none; }
.program-stat-number {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -1px;
    display: inline;
    line-height: 1;
}
.program-stat-suffix { font-size: 28px; font-weight: 900; color: rgba(255,255,255,0.75); display: inline; }
.program-stat-label  { margin-top: 8px; color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; }

/* ===========================
   SINGLE PROGRAM — BODY
=========================== */
.program-body { padding: 64px 0; }
.program-body__inner { max-width: 78%; margin: 0 auto; }
.program-full-desc { color: var(--navy); font-size: 16px; line-height: 1.85; }
.program-full-desc p { margin-bottom: 20px; text-align: justify; }
.program-full-desc h2,
.program-full-desc h3 { font-weight: 700; color: var(--navy); margin: 32px 0 12px; }
.program-full-desc ul,
.program-full-desc ol { padding-left: 1.4em; margin-bottom: 20px; color: var(--gray-600); }
.program-full-desc li { margin-bottom: 6px; }

/* ===========================
   SINGLE PROGRAM — GALLERY
=========================== */
.program-gallery-section { padding: 0 0 64px; }
.program-gallery-title { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 24px; }
.program-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.program-gallery-item {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--gray-100);
}
.program-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.program-gallery-overlay {
    position: absolute; inset: 0;
    background: rgba(29, 53, 87, 0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: var(--transition); color: var(--white);
}
.program-gallery-item:hover img { transform: scale(1.06); }
.program-gallery-item:hover .program-gallery-overlay { opacity: 1; }

/* ===========================
   SINGLE PROGRAM — BACK BTN
=========================== */
.program-back-wrap { padding: 0 0 64px; }

/* ===========================
   PROGRAM CARD IMAGE OVERLAY (archive)
=========================== */
.program-card__image { display: block; cursor: pointer; position: relative; }
.program-card__image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
    display: flex; align-items: center; justify-content: center;
}
.program-card__image-title {
    font-family: 'Merriweather', serif;
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    padding: 0 16px;
    margin: 0;
}
[dir="rtl"] .program-card__image-title { font-family: 'Cairo', sans-serif; font-size: 26px; }

/* ===========================
   RESPONSIVE — archive / single
=========================== */
@media (max-width: 960px) {
    .program-stats-grid   { grid-template-columns: repeat(3, 1fr); }
    .program-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .program-stats-grid   { grid-template-columns: 1fr; }
    .program-stat-item    { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
    .program-stat-item:last-child { border-bottom: none; }
    .program-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .program-hero         { min-height: 300px; }
    .program-hero__title  { font-size: 26px; }
    .programs-archive-hero { padding: 60px 0 40px; }
}

/* ===========================
   RTL SUPPORT
=========================== */
[dir="rtl"] .program-hero__back { direction: rtl; }
[dir="rtl"] .program-full-desc ul,
[dir="rtl"] .program-full-desc ol { padding-left: 0; padding-right: 1.4em; }
[dir="rtl"] .program-full-desc p  { direction: rtl; }
[dir="rtl"] .showcase-item__number { font-family: 'Cairo', sans-serif; }

/* ======= RELATED PROGRAMS ======= */
.program-related {
    padding: 60px 0;
    background: #F8FAFC;
}
.program-related > .container > .program-related__title {
    font-size: 28px;
    font-weight: 700;
    color: #1D3557;
    margin-bottom: 32px;
    text-align: center;
}
.program-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.program-related__card {
    position: relative;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #1D3557;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    transition: transform 0.2s, box-shadow 0.2s;
}
.program-related__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.program-related__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.program-related__body {
    position: relative;
    z-index: 2;
    padding: 20px;
    color: #fff;
    width: 100%;
}
.program-related__body .program-related__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #fff;
}
.program-related__desc {
    font-size: 13px;
    opacity: 0.85;
    margin: 0;
    color: #fff;
}
@media (max-width: 768px) {
    .program-related__grid { grid-template-columns: 1fr; }
}

/* ===========================
   BLOCKQUOTE STYLES
   =========================== */
.program-full-desc blockquote,
.program-content blockquote,
.entry-content blockquote,
.sycac-content blockquote {
    position: relative;
    margin: 30px 0;
    padding: 24px 28px 24px 36px;
    background: linear-gradient(135deg, #f0f9f4 0%, #e8f5ee 100%);
    border-left: 5px solid var(--color-secondary, #00783C);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.8;
    color: #2c5f4a;
}

.program-full-desc blockquote p,
.program-content blockquote p,
.entry-content blockquote p,
.sycac-content blockquote p {
    margin: 0;
}

[dir="rtl"] .program-full-desc blockquote,
[dir="rtl"] .program-content blockquote,
[dir="rtl"] .entry-content blockquote,
[dir="rtl"] .sycac-content blockquote {
    border-left: none;
    border-right: 5px solid var(--color-secondary, #00783C);
    border-radius: 8px 0 0 8px;
    padding: 24px 36px 24px 28px;
}

.program-intro-quote {
    position: relative;
    margin: 0 0 30px 0;
    padding: 24px 28px 24px 36px;
    background: linear-gradient(135deg, #f0f9f4 0%, #e8f5ee 100%);
    border-left: 5px solid var(--color-secondary, #00783C);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.8;
    color: #2c5f4a;
}

.program-intro-quote p {
    margin: 0;
}

[dir="rtl"] .program-intro-quote {
    border-left: none;
    border-right: 5px solid var(--color-secondary, #00783C);
    border-radius: 8px 0 0 8px;
    padding: 24px 36px 24px 28px;
}

.program-intro-quote {
    position: relative;
    margin: 0 0 30px 0;
    padding: 24px 28px 24px 36px;
    background: linear-gradient(135deg, #f0f9f4 0%, #e8f5ee 100%);
    border-left: 5px solid var(--color-secondary, #00783C);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.8;
    color: #2c5f4a;
}
.program-intro-quote p {
    margin: 0;
}
[dir="rtl"] .program-intro-quote {
    border-left: none;
    border-right: 5px solid var(--color-secondary, #00783C);
    border-radius: 8px 0 0 8px;
    padding: 24px 36px 24px 28px;
}

#program_content_meta_box .sycac-prog-active .wp-editor-area {
}

#sycac_program_multilingual .wp-editor-area {
}

#program_full_desc_en_ifr,
#program_full_desc_ar_ifr,
#program_full_desc_tr_ifr {
    height: 400px !important;
}

/* ── Category counter badge ── */
.cat-counter {
    display: inline-flex;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 12px;
}
.cat-counter span { display: flex; align-items: center; gap: 4px; }

/* ── Back button ── */
.programs-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s;
}
.programs-back-btn:hover { color: #ffffff; }