/*
 * Page-Specific Styles for the Homepage (index.html)
 *
 * This file contains styles that are unique to the homepage,
 * such as the hero section, works carousel, and process snippets.
 */

/* ------------------- */
/* Hero Section        */
/* ------------------- */
/*
 * The hero section is the first thing a visitor sees.
 * It's designed to be visually impactful with a large heading.
 */
.hero-section {
    /* Hero section background image set to gallery/hero.jpg */
    height: calc(80vh - var(--nav-height));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    /* Hero section cleared: no background image, only text remains */
}

/* Styles for the main heading in the hero section. */
.hero-section h1 {
    /* A very large font size to make a strong first impression. */
    font-size: 4.5rem;
    /* No bottom margin to keep it tight with the subtitle. */
    margin-bottom: 0;
    /* Uses the primary accent color for the main title. */
    color: var(--color-primary-accent);
}

/* Styles for the subtitle in the hero section. */
.hero-section .subtitle {
    /* A smaller font size that complements the main heading. */
    font-size: 1.5rem;
    /* Uses the standard text color. */
    color: var(--color-text);
    /* Sets the font to the body font, creating a contrast in style from the heading. */
    font-family: var(--font-body);
}

/* ------------------- */
/* Section Styling     */
/* ------------------- */
/*
 * Provides consistent padding and borders for the content sections on the homepage.
 */
.about-section {
    /* Vertical padding to create space between sections. */
    padding: 4rem 0;
    /* A border on the bottom of each section to visually separate them. */
    border-bottom: 2px solid var(--color-text);
    /* Centers the content including the Read More button */
    text-align: center;
}

.latest-works-section {
    /* Vertical padding to create space between sections. */
    padding: 4rem 0;
    /* A border on the bottom of each section to visually separate them. */
    border-bottom: 2px solid var(--color-text);
}

.process-section {
    /* Vertical padding to create space between sections. */
    padding: 4rem 0;
    /* A border on the bottom of each section to visually separate them. */
    border-bottom: 2px solid var(--color-text);
    /* Centers the content including the See More of the Process button */
    text-align: center;
}

/* Alternating background colors for visual interest. */
.latest-works-section {
    /* A slightly different background can help break up the page. Here we use a semi-transparent black to darken the default background. */
    background-color: rgba(0, 0, 0, 0.05);
}

/* Styles for the main heading within each section. */
section h2 {
    /* Centers the heading. */
    text-align: center;
    /* Large font size for section titles. */
    font-size: 2.5rem;
    /* More space below the heading to separate it from the content. */
    margin-bottom: 2rem;
    /* Uses the secondary accent color for emphasis. */
    color: var(--color-secondary-accent);
}

/* ------------------- */
/* Latest Works Carousel */
/* ------------------- */
/*
 * The container for the carousel.
 * It uses flexbox to lay out the carousel items horizontally.
 * Overflow is hidden, so only one set of items is visible at a time.
 */
.works-carousel {
    /* Flexbox is used for easy alignment of items. */
    display: flex;
    /* Allows wrapping if there isn't enough space (useful for responsiveness). */
    flex-wrap: nowrap;
    /* Hides the parts of the items that overflow the container. */
    overflow-x: auto; /* Enables horizontal scrolling */
    /* Adds a gap between the carousel items. */
    gap: 1.5rem;
    /* Custom scrollbar styling for a more integrated look. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-accent) var(--color-background);
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari) */
.works-carousel::-webkit-scrollbar {
  height: 8px;
}
.works-carousel::-webkit-scrollbar-track {
  background: var(--color-background);
}
.works-carousel::-webkit-scrollbar-thumb {
  background-color: var(--color-primary-accent);
  border-radius: 10px;
  border: 2px solid var(--color-background);
}


/*
 * Individual item within the carousel.
 * The flex-basis and flex-shrink properties control the size of the items.
 */
.carousel-item {
    /* The item will not shrink if the container is smaller. */
    flex-shrink: 0;
    /* The base width of each item. This creates a 3-item view on larger screens. */
    flex-basis: calc(33.333% - 1rem);
    /* Ensures the item respects the padding and border settings. */
    box-sizing: border-box;
    /* For demonstration, adds a border. */
    border: 2px solid var(--color-text);
    /* Slight rounding of corners. */
    border-radius: 8px;
    /* Hides any part of the image that might overflow the rounded corners. */
    overflow: hidden;
    /* A subtle shadow to lift the item off the page. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* The image within a carousel item. */
.carousel-item img {
    /* Ensures the image spans the full width of its container. */
    width: 100%;
    /* Maintains the aspect ratio of the image. */
    height: auto;
    /* Vertically aligns the image to the bottom, which can be useful if heights vary. */
    vertical-align: middle;
}

/* The title of the artwork in the carousel. */
.carousel-item h3 {
    /* Padding around the text. */
    padding: 1rem;
    /* Uses the third accent color. */
    background-color: var(--color-third-accent);
    /* Text color that contrasts with the background. */
    color: var(--color-text);
    /* Smaller font size for the item title. */
    font-size: 1.2rem;
    /* Centers the text. */
    text-align: center;
    /* Removes the default margin from the heading. */
    margin: 0;
}


/* ------------------- */
/* Process Snippets    */
/* ------------------- */
/*
 * Container for the process snippets.
 * It uses a grid layout to arrange the snippets neatly.
 */
.process-snippets {
    /* Defines a 3-column grid with equal-width columns. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Sets the gap between grid items. */
    gap: 1.5rem;
    /* Centers the grid items if there's extra space. */
    justify-items: center;
    /* Aligns text to the center within each snippet. */
    text-align: center;
}

/* A single snippet item. */
.snippet img {
    /* Ensures all images have consistent size regardless of their natural dimensions. */
    width: 100%;
    height: 250px;
    /* Crops images to fit the specified dimensions while maintaining aspect ratio. */
    object-fit: cover;
    /* Adds a border around the image. */
    border: 3px solid var(--color-text);
    /* Adds a subtle shadow. */
    box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
    /* A small margin below the image. */
    margin-bottom: 1rem;
}

/* The heading for each snippet. */
.snippet h4 {
    /* Uses the primary accent color. */
    color: var(--color-primary-accent);
    /* Slightly larger font size for the snippet title. */
    font-size: 1.3rem;
}

/* ------------------- */
/* Buttons             */
/* ------------------- */
/*
 * A general-purpose button style used for links styled as buttons.
 */
.btn {
    /* Displays the link as an inline block to allow for padding and margins. */
    display: inline-block;
    /* Padding for a larger clickable area. */
    padding: 0.8rem 1.5rem;
    /* Background color for the button. */
    background-color: var(--color-primary-accent);
    /* Text color for the button. */
    color: var(--color-text);
    /* Removes the default underline from the link. */
    border: 2px solid var(--color-text);
    /* Adds rounded corners. */
    border-radius: 5px;
    /* Uppercase text for styling. */
    text-transform: uppercase;
    /* Heavier font weight for emphasis. */
    font-weight: bold;
    /* Smooth transition for hover effects. */
    transition: all 0.3s ease;
    /* Centers the button if its parent is text-align: center. */
    margin-top: 1rem;
}

/* Hover and focus states for the button. */
.btn:hover,
.btn:focus {
    /* Changes background color on hover. */
    background-color: var(--color-secondary-accent);
    /* Changes text color on hover. */
    color: #fff;
    /* Removes the underline that might appear from global 'a:hover' styles. */
    border-bottom: 2px solid var(--color-text);
    /* Lifts the button slightly on hover. */
    transform: translateY(-2px);
}