/* ── Read More / Read Less ─────────────────────────────── */
.promotion-desc.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promotion-desc {
    color: #555;
    line-height: 1.55;
}

/* ── Read More as a subtle link (Inquiry Now stays primary) ─ */
.read-more-toggle {
    white-space: nowrap;
    border: none;
    background: transparent;
    color: #6c757d;
    font-weight: 600;
    transition: color .2s ease;
}

.read-more-toggle:hover,
.read-more-toggle:focus {
    color: #006f45;
    background: transparent;
}

/* ── Cards: radius, soft shadow, hover lift ─────────────── */
#promotion-hero h1 {
    font-weight: 700;
}

#promotion-hero ul h5 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.55;
    color: #444;
}

#featured-promotion-section .card,
#promostion_section .card {
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
}

#featured-promotion-section .card:hover,
#promostion_section .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 111, 69, .18) !important;
}

/* ── Image wrapper: clip for zoom + uniform 16:9 area ──── */
#featured-promotion-section .card-img-wrapper,
#promostion_section .card-img-wrapper {
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    aspect-ratio: 16 / 9;
}

#featured-promotion-section .card-img-wrapper img,
#promostion_section .card-img-wrapper img {
    transition: transform .4s ease;
    background: #f4f4f4;
}

#featured-promotion-section .card-img-wrapper:hover img,
#promostion_section .card-img-wrapper:hover img {
    transform: scale(1.06);
}

/* ── Title: clamp to 2 lines for uniform card height ───── */
#featured-promotion-section .card h5,
#promostion_section .card h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* ── INSPIRE / EXPIRED badge: brand-aligned neutral ────── */
#featured-promotion-section .expired-badge,
#promostion_section .expired-badge {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
}

/* ── Inquiry Now CTA: clean hover after removing pulse ─── */
#promotion-hero .btn-warning,
#featured-promotion-section .btn-warning,
#promostion_section .btn-warning {
    border: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

#promotion-hero .btn-warning:hover,
#featured-promotion-section .btn-warning:hover,
#promostion_section .btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 193, 7, .45);
}

/* ── Featured AIRFARES card: brand-green overlay + white dot pattern ── */
#featured-promotion-section .card-img-overlay {
    background:
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALklEQVR4nGP4//8/AzUwVQwZNWiQGqRHDYP0kDDZBulhwQPrIqqG0eCM/pFsEADp+sq4n7OBwwAAAABJRU5ErkJggg=="),
        linear-gradient(
            180deg,
            rgba(0, 111, 69, 0.15) 0%,
            rgba(0, 111, 69, 0.75) 55%,
            rgba(0, 80, 48, 0.92) 100%
        );
    background-size: 18px 18px, cover;
    border-radius: 14px;
    padding: 2rem;
}

#featured-promotion-section .card-img-overlay p,
#featured-promotion-section .card-img-overlay h4 {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

#featured-promotion-section .card-img-overlay h4 {
    font-weight: 800;
    letter-spacing: .08em;
    font-size: 2rem;
}

/* ── Section rhythm for the non-.wrapper featured section ─ */
#featured-promotion-section {
    padding: 3.215rem 0;
}

/* ── Smooth anchor scroll (respect reduced motion) ─────── */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

#promostion_section,
#featured-promotion-section {
    scroll-margin-top: 90px;
}

/* ── Keyboard focus rings ──────────────────────────────── */
#featured-promotion-section .card a:focus-visible,
#featured-promotion-section .card button:focus-visible,
#promostion_section .card a:focus-visible,
#promostion_section .card button:focus-visible {
    outline: 2px solid #006f45;
    outline-offset: 2px;
}

/* ── Modal buttons: keep footer actions tidy ───────────── */
.custom-modal .modal-body .btn-success,
.custom-modal .modal-body .btn-secondary {
    min-width: 96px;
}

/* ── Task 1: expand image wrapper when Read More is active ── */
#featured-promotion-section .card-img-wrapper.is-expanded,
#promostion_section .card-img-wrapper.is-expanded {
    aspect-ratio: unset;
    flex: 1 1 auto;
    max-height: none;
    transition: max-height 0.4s ease;
}

#featured-promotion-section .card-img-wrapper.is-expanded img,
#promostion_section .card-img-wrapper.is-expanded img {
    height: 100%;
    object-fit: cover;
}

/* ── Task 3: full-height AIRFARES image, equal-height columns ── */
#featured-promotion-section .col-md-6:first-child .card {
    display: flex;
    flex-direction: column;
}

#featured-promotion-section .col-md-6:first-child .card-img {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    display: block;
}

#featured-promotion-section .row {
    align-items: stretch;
}

/* ── Featured right card: image fills available height (body natural) ── */
#featured-promotion-section .col-md-6:last-child .card {
    display: flex;
    flex-direction: column;
}

#featured-promotion-section .col-md-6:last-child .card-img-wrapper {
    flex: 1 1 auto;
    aspect-ratio: unset;
}

#featured-promotion-section .col-md-6:last-child .card-body {
    flex-shrink: 0;
}

/* ── Lower section cards: flex-column so body fills card & buttons anchor bottom ── */
#promostion_section .card {
    display: flex;
    flex-direction: column;
}

#promostion_section .card-body {
    flex: 1 1 auto;
}

/* When a card's image is expanded (Read More), let the image fill the extra
   height by taking the body back to its natural size. Applies to the clicked
   card and the paired sibling card that gets synced via JS. */
#promostion_section .card:has(.card-img-wrapper.is-expanded) .card-body {
    flex: 0 0 auto;
}

/* ============================================================
   MODERN CARD & BUTTON REFRESH
   ============================================================ */

/* ── Cards: sharper radius, brand-accent top stripe ────── */
#featured-promotion-section .card,
#promostion_section .card {
    border-radius: 18px !important;
    border: none;
    border-top: 3px solid #00dc00;          /* gold accent stripe */
    box-shadow: 0 4px 24px rgba(0, 111, 69, .10);
    transition: transform .28s ease, box-shadow .28s ease;
    overflow: hidden;
}

#featured-promotion-section .card:hover,
#promostion_section .card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(0, 111, 69, .20) !important;
}

/* ── Image wrapper: tighter clip radius ─────────────────── */
#featured-promotion-section .card-img-wrapper,
#promostion_section .card-img-wrapper {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

/* ── Card body: breathing room ──────────────────────────── */
#featured-promotion-section .card-body,
#promostion_section .card-body {
    padding: 1.5rem 1.6rem 1.4rem;
}

/* ── Card title: slightly larger, tighter clamp ─────────── */
#featured-promotion-section .card h5,
#promostion_section .card h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: .01em;
    -webkit-line-clamp: 2;
    line-height: 1.4;
}

/* ── hr: lighter, shorter ───────────────────────────────── */
#featured-promotion-section .card hr,
#promostion_section .card hr {
    border-color: rgba(0, 111, 69, .15);
    margin: .6rem 0 .9rem;
}

/* ============================================================
   INQUIRY NOW BUTTON  (replaces .btn-warning in card footers)
   ============================================================ */
.btn-inquiry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem 1.2rem;
    border-radius: 50px;                    /* pill shape */
    border: none;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #000;
    background: linear-gradient(135deg, #ffc107 0%, #ffab00 100%);
    box-shadow: 0 4px 14px rgba(255, 193, 7, .40);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    white-space: nowrap;
}

.btn-inquiry:hover,
.btn-inquiry:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 193, 7, .55);
    background: linear-gradient(135deg, #ffca2c 0%, #ffc107 100%);
    color: #000;
}

.btn-inquiry:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(255, 193, 7, .35);
}

/* ============================================================
   READ MORE BUTTON  (right side, secondary ghost style)
   ============================================================ */
.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .95rem;
    border-radius: 50px;                    /* pill shape */
    border: 1.5px solid #d1d5db;
    background: #ffffff;
    color: #4b5563;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease,
                background .2s ease, box-shadow .2s ease;
    flex-shrink: 0;                         /* never squish on small cards */
}

.btn-read-more:hover,
.btn-read-more:focus {
    border-color: #006f45;
    color: #006f45;
    background: #f0faf5;
    box-shadow: 0 2px 10px rgba(0, 111, 69, .15);
}

.btn-read-more:active {
    background: #e6f5ee;
}

/* Rotate chevron icon when description is expanded */
.btn-read-more .toggle-icon {
    transition: transform .25s ease;
    font-size: .75rem;
}

/* NOTE: the old .read-more-toggle overrides at the top of this file are
   superseded by .btn-read-more above (same specificity, declared later).
   A blanket "all: unset" reset was intentionally NOT used — it would also
   wipe the .btn / .btn-read-more pill styling from these buttons. */

/* ── Button-row container: ensure proper alignment ──────── */
#featured-promotion-section .card-body .d-flex,
#promostion_section .card-body .d-flex {
    flex-wrap: nowrap;
}

/* ── Badge refinements ──────────────────────────────────── */
.special-offer-badge {
    border-radius: 50px;
    font-size: .72rem;
    letter-spacing: .06em;
    padding: 4px 12px;
}

.expired-badge {
    border-radius: 50px;
    font-size: .72rem;
    letter-spacing: .06em;
    padding: 4px 12px;
}