/* ════════════════════════════════════════════════════════════
   LAYOUT: Left Panel (Documentation Cards)
════════════════════════════════════════════════════════════ */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.doc-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(15, 47, 112, 0.16), 0 2px 12px rgba(0,0,0,0.10);
    padding: 1.2rem 1rem 1rem 1.2rem;
    text-decoration: none;
    color: var(--black);
    border: 1.5px solid var(--light-grey);
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
    min-height: 200px;
    text-align: center;
    justify-content: center; 
}
.doc-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 151, 178, 0.13);
    transform: translateY(-2px) scale(1.025);
    color: var(--accent);
}
.doc-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.12rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--blue);
}
.doc-card p {
    color: var(--dark-grey);
    font-size: 0.97rem;
}

/* ════════════════════════════════════════════════════════════
   TEMPORARY:  ⬇️ The PENDING Cards ⬇️ 
════════════════════════════════════════════════════════════ */
        /* REMOVE THESE AFTER ALL PENDING CARDS ARE FINISHED*/
        .pending-card h3 {
            margin-bottom: 0.5rem;
            font-size: 1.12rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--blue);
        }
        .pending-card {
            display: flex;
            flex-direction: column;
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 1px 8px rgba(15, 47, 112, 0.07);
            padding: 1.2rem 1rem 1rem 1.2rem;
            text-decoration: none;
            color: var(--black);
            border: 1.5px solid var(--light-grey);
            transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
            min-height: 200px;
            text-align: center;
            justify-content: center;
            opacity: .5;
        }
        /* ⬆️ END PENDING CARDS STYLES ⬆️ */

/* ════════════════════════════════════════════════════════════
   LAYOUT: Right Panel (Extends bullet list from main.css)
════════════════════════════════════════════════════════════ */
.right-panel .bullet-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
}
.right-panel .bullet-list a {
    display: block;
    width: 100%;
    background-color: #f0f0f0;
    color: var(--blue);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.bullet-list a:visited {color: var(--blue);}
.right-panel .bullet-list a:hover {
    background-color: var(--blue);
    color: var(--white);
}
.right-panel .bullet-list li {margin-bottom: 1rem;}
.right-panel h2 {color: var(--accent)}
.right-panel p {width: 60%; margin: 40px auto 0; font-size: 1.15rem;}

/* ════════════════════════════════════════════════════════════
   FEATURES: Media Queries
════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
    .card-grid {grid-template-columns: 1fr 1fr;}
}
@media (min-width: 950px) {
  .card-grid {grid-template-columns: 1fr 1fr 1fr;}
}