/* ===========================
   ROOT FIX
=========================== */

.dr1058resources {
    padding: 80px 20px;
    background: radial-gradient(circle at top, #0b1220, #05070d);
    color: #e8eefc;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* 🔥 CRITICAL FIX */
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .dr1058resources {
        overflow-x: hidden;
    }
}

/* ===========================
   CONTAINER
=========================== */

.dr1058resources__container {
    max-width: 1100px;
    margin: 0 auto;

    /* 🔥 CRITICAL FIX */
    width: 100%;
    min-width: 0;
}

/* ===========================
   HEADER
=========================== */

.dr1058resources__header {
    text-align: center;
    margin-bottom: 50px;
}

.dr1058resources__title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.dr1058resources__subtitle {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 10px;
}

/* ===========================
   GRID (DESKTOP SAFE FIX)
=========================== */

.dr1058resources__grid {
    display: grid;

    /* 🔥 SAFE DESKTOP LAYOUT */
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    /* 🔥 CRITICAL */
    min-width: 0;
}

/* ===========================
   CARD (MOST IMPORTANT FIX AREA)
=========================== */

.dr1058resources__card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transition: 0.3s ease;

    /* 🔥 CRITICAL FIXES */
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

.dr1058resources__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
}

/* ===========================
   TEXT SAFETY
=========================== */

.dr1058resources__text,
.dr1058resources__list {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ===========================
   MOBILE FALLBACK
=========================== */

@media (max-width: 768px) {
    .dr1058resources__grid {
        grid-template-columns: 1fr;
    }
}