/*=================================================================================*/
/*                       START OF RESET AND BASE STYLES                            */
/*=================================================================================*/

/* Universal selector to apply styles to all elements on the page */
* {
    margin: 0; 							/* Removes any default margin */
    padding: 0; 						/* Removes any default padding */
    box-sizing: border-box; 					/* Ensures padding and borders are included in element's total width/height */
    outline: 0px solid rgba(0, 0, 0, 0.1);			/* Removes the outline that might appear on focused elements */
    outline-offset: -1px; 					/* Offsets the outline slightly for visual consistency */
}

/* Base styles for the body element */
body {
    font-family: Arial, sans-serif; 				/* Sets the font family for the entire page */
    line-height: 1.2; 						/* Increases line height for better readability */
    color: #333; 						/* Sets a dark grey color for text */
    background-color: #FFFFFF; 					/* Sets a white background color */
    width: 100%; 						/* Ensures body takes up full width */
    overflow-x: auto; 						/* Enables horizontal scrolling if content overflows */
    align-items: flex-end; 				/* Vertically aligns items in the bottom (center is in middle) */
}

/* Layout structure */
.content-wrapper {
    max-width: 1200px; 						/* Limits the maximum width of the content to 1200px */
    margin: 0 auto; 						/* Centers the content horizontally */
    padding: 0 1rem; 						/* Adds padding on left and right */
    width: 100%; 						/* Ensures the content wrapper takes full width */
}


/*=================================================================================*/
/*                         START OF Main Layout STYLES                             */
/*=================================================================================*/

/* Main Layout container with flexbox */
.main-layout {
    display: flex; 						/* Applies flexbox layout */
    width: 100%; 						/* Ensures it takes full width */
    gap: 1.5rem; 						/* Adds a gap of 1.5rem between child elements */
}

/* Main column (flexible width) */
.main-column {
    flex: 1; 							/* Allows the column to grow and take available space */
    min-width: 0; 						/* Prevents content from shrinking below its minimum width */
}

/* Updated main grid layout with flexbox */
.main-grid {
    display: flex; 						/* Applies flexbox layout */
    width: 100%; 						/* Ensures the grid takes full width */
    gap: 1.5rem; 						/* Adds a gap between items */
    padding: 0 1rem; 						/* Adds padding on left and right */
}

/* Content grid, stacked vertically */
.content-grid {
    display: flex; 						/* Applies flexbox layout */
    flex-direction: column; 					/* Arranges items vertically */
    gap: 1.25rem; 						/* Adds vertical space between items */
    width: 100%; 						/* Ensures it takes full width */
}

/* Row layout for content */
.content-row {
    display: flex; 						/* Applies flexbox layout */
    gap: 20px; 							/* Adds horizontal space between items */
    width: 100%; 						/* Ensures it takes full width */
    align-items: flex-start; 					/* Aligns items to the start of the row */
}

/* Thumbnail wrapper with aspect ratio and overflow handling */
.thumbnail-wrapper {
    width: 270px; 						/* Fixed width */
    aspect-ratio: 16/9; 					/* Maintains a 16:9 aspect ratio */
    overflow: hidden; 						/* Hides anything overflowing the box */
    border-radius: 8px; 					/* Rounds the corners */
    background-color: #f0f0f0; 					/* Sets a light background color */
    flex-shrink: 0; 						/* Prevents shrinking */
}

/* Styles for images inside the thumbnail wrapper */
.thumbnail-wrapper img {
    width: 100%; 						/* Ensures the image takes full width of the container */
    height: 100%; 						/* Ensures the image takes full height of the container */
    object-fit: cover; 						/* Crops the image to fill the container */
}

/*=================================================================================*/
/*         START OF Content Grid Items STYLES Next To Thumbnails                   */
/*=================================================================================*/



/*=================================================================================*/
/*                         START OF TEXT ALIGNMENT STYLES                          */
/*=================================================================================*/

/* Content item layout, aligned to center vertically */
.content-item {
    display: flex;                  /* Enables flexbox for layout management */
    flex-direction: column;         /* Stacks the title, category, and meta-info vertically */
    gap: 0.25rem;                   /* Adds space between the stacked text elements */
    flex: 1;                        /* Allows the content item to grow and take available space */
    justify-content: center;        /* Centers the text vertically within the parent container */
    color: #000000;                 /* Overrides color for the uploader name */

}

/* Category text styling */
.category {
    font-size: 12px;                /* Sets the font size for the category text */
    color: #000000;                 /* Applies a white color to the category (video) text */
    font-weight: 580;               /* Sets a semi-bold weight for the text */
    text-decoration: none;          /* Removes underline from category links */
}



/*  Video Title (h4) styling */


.content-item h4 {
    font-size: 22px;                /* Sets the font size for the title */
    line-height: 26px;              /* Adjusts the line height for readability */
    margin: 0;                      /* Removes any default margins around the title */
    font-weight: 2200;              /* Makes the title bold for emphasis */
    color: #232323;                 /* Sets a dark color for the title */
}

.content-item h4 a {
    color: inherit;                 /* Ensures the link inherits the color from its parent */
    text-decoration: none;          /* Removes underline from the title link */
    font-weight: 550;               /* Sets a semi-bold weight for the link */
}


/* Metadata (uploader name on desktop, read time) styling */
.meta-info {
    display: flex;                  /* Uses flexbox to align meta items horizontally */
    gap: 0.5rem;                    /* Adds space between each metadata element */
    align-items: center;            /* Vertically aligns metadata elements (e.g., uploader and read time) */
    color: #000000;                 /* Sets a soft gray color for the metadata text */
    font-size: 15px;                /* Sets the font size for metadata text */
    font-weight: 490;                /* Sets a semi-bold weight for the link */
}

/* Overrides color for the uploader name */
.meta-info .source {
    color: #000000;                 /* Overrides color for the uploader name on desktop */
    font-weight: 600;               /* Makes the title bold for emphasis */
    font-size: 15px;                /* Sets the font size for metadata text */

}

/* Read time bullet prefix */
.read-time {
    display: none;                  /* Hides both the read time and its bullet */
/*    display: inline-block;     */ /* Makes the read time visible again */
/*    color: #FF5733;            */  /* Example color for customization */
}

}

.read-time::before {
    content: "•";                   /* Adds a bullet point before the read time */
    margin-right: 0.5rem;           /* Adds space between the bullet and the text */
    display: none;          /* display: inline-block; Ensures the bullet is visible */
}

/*=================================================================================*/
/*                          START OF ROW AND THUMBNAIL STYLES                      */
/*=================================================================================*/

/* Content row layout for thumbnail and text */
.content-row {
    display: flex;                  /* Enables flexbox for layout management */
    gap: 20px;                      /* Adds space between the thumbnail and the text */
    align-items: center;            /* Aligns the thumbnail and text vertically in the middle */
}

/* Thumbnail wrapper */
.thumbnail-wrapper {
    width: 270px;                   /* Sets a fixed width for the thumbnail */
    aspect-ratio: 16/9;             /* Maintains a 16:9 aspect ratio for consistent thumbnail display */
    overflow: hidden;               /* Prevents any overflowing content from the thumbnail box */
    border-radius: 8px;             /* Rounds the corners of the thumbnail */
    background-color: #f0f0f0;      /* Applies a light gray background for the thumbnail container */
    flex-shrink: 0;                 /* Prevents the thumbnail from shrinking in size */
}

/* Thumbnail image styling */
.thumbnail-wrapper img {
    width: 100%;                    /* Ensures the image fills the thumbnail container */
    height: 100%;                   /* Ensures the height matches the container */
    object-fit: cover;              /* Crops the image to fill the container without distortion */
}
















/*=================================================================================*/
/*                         START OF Sidebar Column STYLES                          */
/*=================================================================================*/

/* Sidebar column with fixed width */
.sidebar-column {
    width: 340px; 						/* Fixed width for sidebar */
    flex-shrink: 0; 						/* Prevents the sidebar from shrinking */
}

/*=================================================================================*/
/*                             Responsive adjustments                              */
/*=================================================================================*/ 

/* Media query for devices with a max width of 768px (tablet and smaller) */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 0; 						/* Removes padding */
    }

    .main-layout {
        flex-direction: column; 				/* Stacks main layout items vertically */
    }

    .sidebar-column {
        display: none; 						/* Hides the sidebar */
    }

    .content-row {
        gap: 10px; 						/* Reduces gap between items */
        padding: 0.75rem 1rem; 					/* Adds padding inside the row */
        border-bottom: 1px solid #f0f0f0; 			/* Adds a light bottom border */
    }

    .thumbnail-wrapper {
        width: 23vw; 						/* Sets the width to 23% of viewport width */
        aspect-ratio: 1/1; 					/* Makes the thumbnail square */
        margin: 0; 						/* Removes any margin */
    }

    .content-item {
        gap: 0.2rem; 						/* Reduces gap between content items */
    }

/* 100% confirmed as video category name on mobile below here, colors only grid category */

    .category {
        font-size: 12px; 					/* Reduces font size */
        line-height: 14px; 					/* Adjusts line height */
   	font-weight: 490;          				/* Sets a semi-bold weight for the link */
	color: #000000;

    }

/* 100% confirmed as gridtitle text size on S9 mobile below here */

    .content-item h4 {
        font-size: 16.75px; 					/* Adjusts font size */
        line-height: 19.5px; 					/* Adjusts line height */
   	font-weight: 500;          				/* Sets a semi-bold weight for the link */
    align-items: center; 					/* Vertically aligns items   */

    }


/*  100% confirmed as griduploder text weight on S9 mobile. Media query for devices with a max width of 768px (tablet and smaller)*/
@media (max-width: 768px) {
    .content-item .meta-info .source {
    font-weight: 440; 						/* Adjust font weight for the uploader name on S9, tablet and smaller devices */
    font-size: 15.4px; 						/* Adjusts font size */
    line-height: 18.5px; 					/* Adjusts line height */
    align-items: center; 					/* Vertically aligns items   */
    margin-bottom: 0.01rem; 					/* Adds margin to the bottom of the text */
    padding-bottom: 0;                  			/* Ensures there's no padding 
    color: #5B5859;

    }
}


    .meta-info {
    font-size: 13.5px; 					/* Adjusts font size */
    font-weight: 470;          				/* Sets a semi-bold weight for the link */
    align-items: center; 					/* Vertically aligns items   */
    margin-bottom: 0.01rem; 					/* Adds margin to the bottom of the text */
    padding-bottom: 0;                  			/* Ensures there's no padding 
    color: #000000;


    }

    .main-menu {
        display: none; 						/* Hides the main menu */
    }

    .secondary-nav input[type="search"] {
        width: 150px; 						/* Adjusts the search input width */
    }
}




/* Media query for devices with a max width of 480px (mobile phones) */
@media (max-width: 480px) {
    .content-row {
        padding: 0.75rem 0.5rem; 				/* Adjusts the padding inside content rows */
    }

    .thumbnail-wrapper {
        width: 30vw; 						/* Sets the width to 30% of viewport width */
    }
}