/* ==========================================================================
   FIFA Global Styles
   Extracted from the original template-fifa.php — shared across all FIFA blocks.
   Enqueued via wp_enqueue_style('vdpa-fifa-global') in each block render.php.
   ========================================================================== */

/* Container width — matches acf-blocks/home_hero_fifa.php inline style */
.pagecontent .container{max-width:1360px;margin-inline:auto;padding-inline:20px;width:100%;}

/* ── Desktop / mobile visibility toggle ─────────────────────────────────── */
.new_mobile_only { display: none; }

/* ── General utilities ───────────────────────────────────────────────────── */
.white-bg { background: #FFF !important; }
.mobile-only { display: none; }
.display-flex { display: flex; flex-direction: row; }
.bottom-70 { margin-bottom: 70px; }
.position-relative { position: relative; }
.make-semi-bold { font-weight: 600; }

/* ── Section spacing / backgrounds ──────────────────────────────────────── */
/* In the original template, a single .events wrapper had margin-top:100px.
   In the block version, each block is a separate .events section.
   Only non-grey-background events blocks get the top margin; grey sections
   have their own padding-top:50px and bottom-70 spacing. */
.events { margin-top: 50px; }
.events.grey-background { margin-top: 0; }
.grey-background { background-color: #F2F2F2; padding-top: 50px; }

/* ── Typography ──────────────────────────────────────────────────────────── */
.header-image-list { font-size: 32px; font-weight: bold; line-height: 34px; color: #002E45; }
.li-header-red { color: #A01A2A; font-size: 20px; font-weight: 600; }
.paragraph-image-list { font-size: 21px; font-weight: 300; line-height: 38px; }
.dates-header { font-size: 34px; font-weight: bold; line-height: 65px; color: #002E45; }
.dates-paragraph { font-size: 30px; font-weight: 300; line-height: 34px; }
/* WYSIWYG fields output <p> tags. When a div.dates-paragraph wraps wysiwyg content,
   the inner <p> must also carry the same typography. margin:0 removes default p spacing. */
.dates-paragraph p { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }
.date-header-text { text-align: center; }
.date-individual-paragraph { text-align: center; font-size: 18px; line-height: 34px; font-weight: 300; }
.date-individual-header { text-align: center; font-size: 24px; line-height: 34px; font-weight: bold; padding-top: 20px; }
.date-individual-row { text-align: center; max-width: 250px; height: 2px !important; margin: 0 auto; }
.photo-credits { text-align: right; font-style: italic; font-size: 16px; line-height: 44px; font-weight: 100; }
.ending-text p { text-align: center; font-size: 32px; line-height: 45px; font-weight: 300; }
.beginning-text p { font-size: 24px; line-height: 44px; font-weight: 300; }
/* Same wysiwyg inner-<p> fix for .li-header-red used as a div wrapper */
.li-header-red p { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; margin: 0; }

/* ── Checkmark list ──────────────────────────────────────────────────────── */
.list-image-list { list-style: none; margin-left: 30px; margin-top: 30px; }
.list-image-list li { position: relative; font-size: 18px; font-weight: 300; line-height: 32px; margin-bottom: 15px; }
.list-image-list li::before { content: ''; position: absolute; left: -41px; top: 1px; width: 20px; height: 30px; background-image: url('/wp-content/uploads/2025/06/PGA-List-Checkmark.png'); background-size: contain; background-repeat: no-repeat; margin-left: 10px; margin-top: 5px; display: inline-block; }

/* ── Image / text sections ───────────────────────────────────────────────── */
.special-list-padding { padding: 20px 60px; }
.image-credit { color: #fff; bottom: 2%; left: 2%; display: grid; font-size: 18px; line-height: 44px; font-weight: 300; font-style: italic; }
.date-image { margin-top: 50px; margin-bottom: 20px; padding-left: 20px; padding-right: 20px; }
.last-image-padding { padding-left: 20px; }
.fifa-zoom-out { max-height: 700px !important; }

/* ── Event tile red overlay ──────────────────────────────────────────────── */
.red-dates-div { position: absolute; bottom: 7%; text-align: center; width: 391px; margin-left: 20px; margin-right: 20px; color: #FFF; background-color: rgba(160,26,42,0.7); height: 60px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 34px; font-weight: bold; }
.red-date-image { width: 100%; }
.red-tablet { width: 100%; }

/* ── Match cards grid ────────────────────────────────────────────────────── */
.fifa-display-flex { display: flex; flex-wrap: wrap; gap: 10px; }
.fifa-element { flex: 0 0 32%; max-width: 32%; box-sizing: border-box; }
.fifa-match { margin-top: 50px; background-color: #022D44; padding: 20px; }
.fifa-match .date-individual-header { color: #fff; font-size: 40px; line-height: 34px; font-weight: 800; }
.fifa-match .date-individual-paragraph { color: #65D0FF; font-size: 24px; line-height: 34px; font-weight: bold; }
.fifa-match .date-individual-row { color: #fff; margin-top: 20px; margin-bottom: 10px; }
.fifa-match .date-individual-paragraph span { color: #fff; font-size: 18px; line-height: 34px; font-weight: 300; }

/* ── Accommodations / hotels ─────────────────────────────────────────────── */
.related-events-header { text-align: center; margin-top: 70px; margin-bottom: 20px; color: #01354F; font-size: 20px; line-height: 21px; font-weight: 800; }
.single-event { margin-right: 10px; }
.event-title-link a { text-decoration: underline; color: #A01C2B; font-size: 12px; line-height: 19px; font-weight: 800; }
.event-description { font-size: 12px; line-height: 21px; font-weight: 300; max-width: 240px; }
.event-image { max-height: 180px; max-width: 300px; width: 300px; }

/* ── Image-text block col alignment ──────────────────────────────────────── */
.pga-header ~ .events .image-list-section-image-part .col-md-6 { display: flex; flex-wrap: wrap; align-items: center; }

/* ── Responsive: ≤1400px ─────────────────────────────────────────────────── */
@media(max-width:1400px) {
    .red-dates-div { width: 331px !important; }
    .fifa-zoom-out { max-height: 350px !important; }
}

/* ── Responsive: ≤1200px ─────────────────────────────────────────────────── */
@media(max-width:1200px) {
    .red-dates-div { width: 272px !important; }
}
@media(max-width:1200px) and (min-width:767px) {
    .fifa-match .date-individual-header { font-size: 33px; }
}

/* ── Responsive: ≤991px ──────────────────────────────────────────────────── */
@media(max-width:991px) {
    .col-md-6 { width: 100%; }
    .bottom-70 { column-count: 1 !important; }
    .display-flex { display: block; text-align: center; }
    .special-list-padding { margin-top: 30px; padding: 20px 0px; text-align: left; }
    .date-image { padding-left: 0px; padding-right: 0px; }
    .text-mobile-changes { padding: 20px 0px !important; text-align: left; margin-bottom: 30px; }
    .display-flex-header { display: flex; flex-direction: row; text-align: left; }
    .last-image-padding { padding-left: 0px; }
    .fifa-display-flex { gap: 10px; }
    .fifa-element { flex: 0 0 49%; max-width: 50%; }
    .red-date-image { width: 100%; }
    .red-tablet { width: 100%; }
    .red-dates-div { bottom: 4% !important; left: 0 !important; width: 100% !important; margin-left: 0px !important; }
    .events { margin-top: 0px !important; }
}

/* ── Responsive: ≤767px ──────────────────────────────────────────────────── */
@media(max-width:767px) {
    /* Desktop/mobile visibility toggle */
    .new-desktop-only { display: none !important; }
    .new_mobile_only { display: block; }
    .new_mobile_only a:hover { color: rgb(170, 30, 49) !important; }
    .new_mobile_only .list-image-list .li-header-red { font-size: 20px !important; line-height: 32px !important; }
    /* On mobile, hide header/list inside .events sections (shown via .new_mobile_only instead) */
    .events .container .header-image-list,
    .events .container .list-image-list { display: none; }
    .events .grey-background { background-color: #fff !important; }
    /* Typography overrides */
    .beginning-text p { font-size: 18px !important; line-height: 32px !important; }
    .paragraph-image-list { font-size: 18px !important; line-height: 32px !important; }
    .header-image-list { font-size: 24px !important; line-height: 34px !important; }
    .dates-header { font-size: 24px !important; line-height: 34px !important; }
    .dates-paragraph { font-size: 21px !important; line-height: 32px !important; }
    .date-individual-header { margin-bottom: 0px; }
    .mobile-hide { display: none !important; }
    .content-red-button { max-width: 300px !important; }
    .ending-text p { font-size: 18px !important; line-height: 32px !important; }
    .no-mobile { display: none; }
    .mobile-only { display: block !important; }
    /* Hero mobile background */
    .new-banner.load {
        background-image: url("https://visitdelco.com/wp-content/uploads/2026/01/FIFA-Visit-Delco-Background.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
    }
    /* Match cards / event tiles */
    .fifa-display-flex { gap: 0px; justify-content: center; }
    .fifa-element { flex: 0 0 auto; max-width: 100%; }
    .fifa-match { min-width: 372px; }
    .events { margin-top: 0px !important; }
}

/* ── Responsive: ≤500px ──────────────────────────────────────────────────── */
@media(max-width:500px) {
    .red-dates-div { bottom: 7% !important; }
    .fifa-match { min-width: 320px; }
    .fifa-match .date-individual-header { font-size: 33px; }
}

/* ── Responsive: ≤350px ──────────────────────────────────────────────────── */
@media(max-width:350px) {
    .fifa-match { min-width: 260px; }
    .fifa-match .date-individual-header { font-size: 30px; }
}