/* ================================== */
/* === Styles for docs.html Page === */
/* ================================== */

/* --- Docs Page Specific Container --- */
.docs-page-content {
    max-width: 1400px; /* Adjust width as needed */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--background-color, #f8f9fa); /* Match theme or slight contrast */
    padding: 40px 50px;
    border-radius: 10px; /* Slightly different radius maybe */
    /* border: 1px solid #e9ecef; Optional subtle border */
    margin-bottom: 30px;
    /* Keep existing page-title/page-intro styles */
}

/* --- Docs Grid Layout --- */
.docs-grid {
    display: grid;
    /* --- Default to 3 columns on wider screens --- */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px; /* Space between cards */
    margin-top: 40px; /* Space below the intro */
    padding: 0; /* Reset padding if inherited */
}

/* --- Individual Documentation Card --- */
.doc-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px 30px; /* More padding */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start (left) */
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    /* Maybe add a subtle top border accent */
    border-top: 4px solid var(--primary-color, #007bff); /* Accent color */
}

.doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* --- Card Icon --- */
.doc-card .doc-card-icon {
    margin-bottom: 18px;
    color: var(--primary-color, #007bff); /* Use theme color for icon */
    /* The size is set using Font Awesome classes like fa-2x in the HTML */
}

/* --- Card Title --- */
.doc-card .doc-card-title {
    margin: 0 0 12px 0; /* Reset margin, add bottom spacing */
    font-size: 1.25rem; /* Slightly larger title */
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.doc-card .doc-card-title a {
    color: inherit; /* Inherit color from parent h2 */
    text-decoration: none;
    transition: color 0.2s ease;
}

.doc-card .doc-card-title a:hover {
    color: var(--primary-color-dark, #0056b3); /* Darker shade on hover */
    text-decoration: underline;
}

/* --- Card Description --- */
.doc-card .doc-card-description {
    font-size: 0.95rem; /* Standard text size */
    color: #555;
    line-height: 1.65;
    margin: 0 0 20px 0; /* Space before the link */
    flex-grow: 1; /* Allows description to expand, pushing link down */
}

/* --- Card Read More Link --- */
.doc-card .doc-card-link {
    display: inline-block; /* Needed for padding/margin */
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color, #007bff);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    /* Optional: Add padding for a button-like feel */
    /* padding: 5px 10px; */
    /* border-radius: 4px; */
    /* border: 1px solid transparent; */
}

.doc-card .doc-card-link:hover {
    color: var(--primary-color-dark, #0056b3);
    text-decoration: underline;
    transform: translateX(3px); /* Subtle move effect */
}


/* === Responsive Adjustments for Docs Page === */

/* --- Tablet View (e.g., 2 Columns) --- */
@media (max-width: 992px) { /* Adjusted breakpoint */
    .docs-page-content {
        max-width: 90%;
        padding: 35px 40px;
    }

    .docs-grid {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns */
        gap: 25px;
    }

    .doc-card {
        padding: 20px 25px;
    }
}

/* --- Mobile View (1 Column) --- */
@media (max-width: 600px) { /* Adjusted breakpoint */
    .docs-page-content {
        padding: 30px 20px;
    }

    .docs-grid {
        grid-template-columns: 1fr; /* Switch to 1 column */
        gap: 20px;
    }

    .doc-card {
        padding: 20px;
        /* Remove top border accent on mobile? Optional */
        /* border-top-width: 0; */
    }

    .doc-card .doc-card-title {
        font-size: 1.15rem;
    }
    .doc-card .doc-card-description {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
    /* Ensure page title/intro are centered if needed (may inherit) */
    .docs-page-content .page-title,
    .docs-page-content .page-intro {
        text-align: center;
    }
}

/* === End of docs.html styles === */