/**
 * DominionPort Mobile Fixes - Version B16
 * Added: Landscape mode - configuration cards 2 per row
 * January 24, 2026
 */

/* ===========================================
   MOBILE STYLES (below 782px)
   =========================================== */
@media (max-width: 781px) {

    /* ----- SPACERS: Hide specific ones on mobile ----- */
    .wp-block-spacer[style*="height:89px"],
    .wp-block-spacer[style*="height:28px"] {
        display: none !important;
    }

    /* ----- HEADING: Reduce size on mobile ----- */
    .wp-block-heading.has-text-align-center.is-style-default {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .wp-block-heading.has-text-align-center.is-style-default br {
        display: none;
    }

    /* ----- PARAGRAPHS: Hide long one at top (but NOT card subtitles) ----- */
    /* Main paragraph has only has-text-align-center, card subtitles also have has-text-color */
    p.has-text-align-center:not(.has-text-color)[style*="font-weight:100"] {
        display: none !important;
    }


    /* ----- TOP BUTTONS (near cards) ----- */
    .wp-block-columns:has([class*="is-style-section-1"]) ~ .wp-block-buttons,
    .wp-block-buttons:has(~ .wp-block-columns [class*="is-style-section-1"]) {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    .wp-block-columns:has([class*="is-style-section-1"]) ~ .wp-block-buttons > .wp-block-button,
    .wp-block-buttons:has(~ .wp-block-columns [class*="is-style-section-1"]) > .wp-block-button {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    .wp-block-columns:has([class*="is-style-section-1"]) ~ .wp-block-buttons .wp-block-button__link,
    .wp-block-buttons:has(~ .wp-block-columns [class*="is-style-section-1"]) .wp-block-button__link {
        width: auto !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* ----- COLUMNS CONTAINING CARDS ONLY ----- */
    .wp-block-columns:has([class*="is-style-section-1"]) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 25px !important;
    }

    /* Hide empty spacer columns only in card rows */
    .wp-block-columns:has([class*="is-style-section-1"]) > .wp-block-column[style*="flex-basis:100px"],
    .wp-block-columns:has([class*="is-style-section-1"]) > .wp-block-column[style*="flex-basis:50px"],
    .wp-block-columns:has([class*="is-style-section-1"]) > .wp-block-column[style*="flex-basis:150px"] {
        display: none !important;
    }

    /* ----- CARDS (Port Panel / Port Mail) ----- */
    .wp-block-column[class*="is-style-section-1"] {
        flex-basis: auto !important;
        width: 85% !important;
        max-width: 300px !important;
        margin: 0 auto 15px auto !important;
        padding: 15px !important;
        float: none !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Card headings - more space below for subtitle */
    .wp-block-column[class*="is-style-section-1"] .wp-block-heading {
        font-size: 20px !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    /* Card description - keep visible, just smaller and no line breaks */
    .wp-block-column[class*="is-style-section-1"] .has-medium-font-size {
        font-size: 13px !important;
        text-align: center !important;
    }

    .wp-block-column[class*="is-style-section-1"] .has-medium-font-size br {
        display: none;
    }

    /* ----- CARD BUTTONS: Stack vertically, login on top, bigger ----- */
    .wp-block-column[class*="is-style-section-1"] .wp-block-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .wp-block-column[class*="is-style-section-1"] .wp-block-button {
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }

    /* Login button (first button - filled style) - bigger */
    .wp-block-column[class*="is-style-section-1"] .wp-block-button.is-style-fill .wp-block-button__link,
    .wp-block-column[class*="is-style-section-1"] .wp-block-button:first-child .wp-block-button__link {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        text-align: center !important;
    }

    /* Need help button (outline style) - smaller, narrower */
    .wp-block-column[class*="is-style-section-1"] .wp-block-button.is-style-outline {
        width: auto !important;
        max-width: none !important;
    }
    .wp-block-column[class*="is-style-section-1"] .wp-block-button.is-style-outline .wp-block-button__link {
        width: auto !important;
        padding: 6px 14px !important;
        font-size: 11px !important;
        text-align: center !important;
    }

    /* ----- BOTTOM INFO BOX (only on homepage with cards) ----- */
    .wp-block-columns:has([class*="is-style-section-1"]) ~ .wp-block-columns .wp-block-column[style*="flex-basis:1000px"] {
        width: 90% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .wp-block-columns:has([class*="is-style-section-1"]) ~ .wp-block-columns .wp-block-column[style*="flex-basis:1000px"] .wp-block-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .wp-block-columns:has([class*="is-style-section-1"]) ~ .wp-block-columns .wp-block-column[style*="flex-basis:1000px"] .wp-block-button__link {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ===========================================
   TABLET STYLES (782px - 991px)
   =========================================== */
@media (min-width: 782px) and (max-width: 991px) {

    .wp-block-spacer[style*="height:89px"] {
        height: 50px !important;
    }

    .wp-block-spacer[style*="height:28px"] {
        height: 20px !important;
    }

    .wp-block-heading.has-text-align-center.is-style-default {
        font-size: 36px !important;
    }

    .wp-block-column[style*="flex-basis:100px"],
    .wp-block-column[style*="flex-basis:50px"],
    .wp-block-column[style*="flex-basis:150px"] {
        flex-basis: 20px !important;
    }
}

/* ===========================================
   DESKTOP STYLES (992px and up)
   =========================================== */
@media (min-width: 992px) {

    /* Hide the short paragraph on desktop */
    p.has-text-align-center:not([style*="font-weight"]) {
        display: none !important;
    }
}

/* ===========================================
   LANDSCAPE MODE (mobile/tablet in landscape)
   =========================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Configuration page cards - 2 per row */
    .wp-block-columns:has(.with-shadow) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    .wp-block-column.with-shadow {
        flex: 0 0 45% !important;
        max-width: 45% !important;
        width: 45% !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    /* Smaller text in landscape cards */
    .wp-block-column.with-shadow .wp-block-heading {
        font-size: 16px !important;
    }

    .wp-block-column.with-shadow p {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .wp-block-column.with-shadow .wp-block-button__link {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* Hide spacer columns in landscape */
    .wp-block-column[style*="flex-basis:100px"],
    .wp-block-column[style*="flex-basis:50px"] {
        display: none !important;
    }
}