/* ============================================================
   GLOBAL LAYOUT (team-layout)
   ============================================================ */
/* Main container for the resources page layout */
.resources-layout {
    height: 100vh;                      /* Full viewport height */
    overflow-y: auto;                   /* allow vertical scroll*/
    padding: 1rem 2rem 4rem 2rem;       /* top, right, bottom, left */
}
/* Adjust layout padding for medium/small screens */
@media (max-width: 992px) {
    .resources-layout {
        padding: 1rem 2rem 4rem 2rem;
    }
}
/* ============================================================
   1. TITLE SECTION
   ============================================================ */
/* Title section container */
.resources-title-section{
    width: 100%;                        /* Take full width of the page */
    display: flex;                      /* Use flex for robust centering */
    justify-content: center;            /* Center horizontally */
    align-items: center;                /* Center vertically within the section */
    padding: 1.5rem 3.5rem 0.5rem 3.5rem;   /* Padding around the title */
    margin-bottom: 0;                   /* No Space below the title section */
}
/* Resources title text*/
.resources-title{
    font-size: 4rem;                    /* Large text size for visibility */
    font-weight: 700;                   /* Bold text */
    color: #1E1E1E;                     /* Dark gray text color */
    margin: 0 auto 2rem auto;           /* Center horizontally and add top/bottom space */
    text-align: center;                 /* Center the title */
    display: block;                     /* Ensure full-width block behavior */
}
/* ============================================================
   2. RESOURCES SECTION
   ============================================================ */
.resources-description-section {
    margin: 2rem auto 0.5rem auto;      /* Top and bottom spacing, center horizontally */
    padding: 0 4rem 0 4rem;             /* Inner spacing on all sides */
    font-size: 1.2rem;                  /* Comfortable reading size */
    color: #333;                        /* Dark text color for readability */
    line-height: 1.8;                   /* Line spacing for better readability */
    text-align: justify;                /* Justify text on both sides */
    white-space: pre-line;              /* Interpret \n as line breaks */
}
/* ============================================================
   3. FILES SECTION
   ============================================================ */
/* Main container for the file section */
.resources-files-section {
    display: flex;
    justify-content: center;            /* Center cards horizontally */
    flex-wrap: wrap;
    gap: 2rem;
    margin: 0 auto 5rem auto;           /* Top and bottom spacing, center horizontally *!*/
    padding: 0 5rem 3rem 5rem;          /* Inner spacing on all sides *!*/
}
/* Individual container for cards - html.A*/
.resources-card-container {
    text-decoration: none;
    color: inherit;
}
/* Card button */
.resources-card-button {
    width: 240px;                       /* Fixed card width */
    height: 140px;                      /* Fixed card height */
    display: flex;                      /* Activar flexbox */
    flex-direction: column;             /* Apilar elementos verticalmente */
    justify-content: space-between;     /* Mantener título arriba y valor abajo */
    align-items: center;                /* Centrar horizontalmente */
    text-align: center;                 /* Center content inside card */
    border-radius: 15px;                /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    background-color: white;            /* White background */
    padding: 1rem;                      /* Inner spacing */
    transition: transform 0.2s ease;    /* Smooth hover animation */
}
/* Card icon */
.resources-card-icon {
    margin: 0 auto 0.8rem auto;         /* Top and bottom spacing, center horizontally */
    height: 40px;
    width: auto;                        /* Keep width automatic to preserve the image aspect ratio */
    max-height: none;
    object-fit: contain;
}
/* Card text */
.resources-card-text {
    font-size: 1.1rem;                  /* Font size for card title */
    font-weight: 700;                   /* Bold weight for emphasis */
    color: #1E1E1E;
    margin: 0;                          /* drop margins */
    padding: 0;                         /* drop internal padding */
    line-height: 1.2;                   /* control line height to be uniform to ensure text position */
    min-height: 2.4em;
}
/* ============================================================
   RESPONSIVE — Small Screens (up to 768px)
   ============================================================ */
@media (max-width: 768px) {
    .resources-title-section{
        padding: 1.5rem 0 0.5rem 0;     /* Padding*/
    }
    .resources-description-section {
        padding: 1.5rem 0.5rem 0 0.5rem;/* Inner spacing on all sides */
    }
    .resources-files-section {
        padding: 0 0.5rem 1rem 0.5rem;  /* Inner spacing (top, sides, bottom) */
    }
}