/* Hero Image Section */
.content-main-image-section {
    width: 100%; /* Takes full width of its parent (which will be main on homepage) */
    overflow: hidden;
    margin-bottom: 2em;
    background-color: #333; /* Fallback color if image fails or for perceived loading */
}
.content-main-image {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.content-main-image img {
  width: 100%;
  height: 40em;
  max-height: 75vh; /* Adjusted max height */
  object-fit: cover;
  object-position: center center; /* Try center center for better framing */
  filter: grayscale(70%) opacity(0.9);
  display: block; /* Ensure it's a block element */
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #f0f0f0;
  font-size: clamp(2em, 5vw, 3.5em);
  width: 100%;
  text-align: center;
}

.text-main {
  background-color: rgba(0, 0, 0, 0.55);
  padding: 1em 0.5em 1.5em 0.5em;
}
.text-main h1 { font-size: 1em; margin-bottom: 0.2em; color: #fff; }
.text-main p { font-size: 0.45em; margin: 0; color: #f0f0f0; }


/* Styles for content sections below the hero on the homepage */
/* These will be inside .home-content-wrapper which is constrained by main.css */
.home-content-wrapper .content-section {
    padding: 20px 0;
}

.home-content-wrapper .featured-line {
  display: block;
  margin: 2em auto 2em 1em;
  width: clamp(15em, 40%, 30em);
  border: 1px solid #800000;
  border-radius: 1em;
}

.home-content-wrapper .section-title {
  margin: 1em 0 1em 0;
  font-size: clamp(1.8em, 4vw, 2.5em);
  color: #800000;
  text-align: center;
}
@media (min-width: 768px) {
    .home-content-wrapper .section-title {
        text-align: left;
        margin-left: 1em; /* Only apply margin-left on larger screens */
    }
}

.home-content-wrapper .week-featured-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 1em 0;
  gap: 20px;
  padding: 1em;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.home-content-wrapper .week-featured-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 600px;
  gap: 15px;
}

.home-content-wrapper .week-featured-text h3 { font-size: clamp(1.2em, 3vw, 1.5em); margin-bottom: 0.5em; color: #735339; }
.home-content-wrapper .week-featured-text p { font-size: clamp(0.9em, 2vw, 1em); line-height: 1.5; color: #555; }

/* THIS IS THE TARGETED CHANGE for the featured artisan image */
.home-content-wrapper .week-featured-item .week-featured-img {
  width: clamp(10em, 30vw, 15em);
  height: clamp(10em, 30vw, 15em); /* Keep aspect ratio square-ish */
  object-fit: cover;
  object-position: center;
  border-radius: 10px; /* Changed from 50% to make it a rounded square */
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.home-content-wrapper .week-featured-art-gallery { display: flex; width: 100%; max-width: 700px; align-items: center; flex-direction: column; margin: 2em 0; }
.home-content-wrapper .gallery-title { display: block; margin: 0 0 1em 0; font-size: clamp(1.3em, 3vw, 1.8em); color: #800000; text-align: center; }
.home-content-wrapper .artist-art-grid {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px;
  overflow-x: auto; padding: 10px 5px; width: 100%;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #735339 #eee9e5;
}
.home-content-wrapper .artist-art-grid::-webkit-scrollbar { height: 8px; }
.home-content-wrapper .artist-art-grid::-webkit-scrollbar-thumb { background-color: #735339; border-radius: 4px; }
.home-content-wrapper .artist-art-grid::-webkit-scrollbar-track { background-color: #eee9e5; }
.home-content-wrapper .artist-art-item {
  display: block; width: clamp(120px, 22vw, 160px); height: clamp(120px, 22vw, 160px);
  flex-shrink: 0; background-color: #e0e0e0; border-radius: 4px;
  overflow: hidden; position: relative; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.home-content-wrapper .artist-art-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.home-content-wrapper .artist-art-item:hover img { transform: scale(1.05); }
.home-content-wrapper .see-more-art { display: flex; justify-content: center; align-items: center; cursor: pointer; padding: 0 10px; flex-shrink: 0; }
.home-content-wrapper .see-more-art span { font-size: clamp(1.5em, 3vw, 2em); color: #800000; }

.home-content-wrapper .featured-art-section { padding: 20px 0; margin-bottom: 30px; }
.home-content-wrapper .featured-art-container {
  display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center;
  padding: 1em; background-color: #f8f9fa; border-radius: 5px;
}
.home-content-wrapper .featured-art-image-link { display: block; flex-shrink: 0; }
.home-content-wrapper .featured-art-img { /* This is for "Art of the Week" image */
  width: clamp(220px, 45vw, 280px); height: clamp(220px, 45vw, 280px);
  object-fit: cover; border: 1px solid #ddd; border-radius: 4px; /* Already a rounded square */
}
.home-content-wrapper .featured-art-details { flex-grow: 1; color: #5D4037; width: 100%; max-width: 500px; }
.home-content-wrapper .featured-art-details .art-name { font-size: clamp(1.5em, 3.5vw, 1.8em); margin-top: 0; margin-bottom: 8px; font-weight: normal; color: #735339;}
.home-content-wrapper .featured-art-details .art-type,
.home-content-wrapper .featured-art-details .art-artist { font-size: clamp(1em, 2.5vw, 1.1em); margin: 4px 0; color: #795548; }
.home-content-wrapper .featured-art-details .view-art-link {
  display: inline-block; margin-top: 15px; color: #fff; background-color: #8B4513;
  text-decoration: none; font-weight: bold; padding: 10px 20px;
  border-radius: 4px; transition: background-color 0.2s, color 0.2s;
}
.home-content-wrapper .featured-art-details .view-art-link:hover { background-color: #735339; }

.home-content-wrapper .categories-container,
.home-content-wrapper .events-container {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px; padding: 1em 0;
}
.home-content-wrapper .category-item,
.home-content-wrapper .event-card {
  display: flex; justify-content: center; align-items: center; flex-direction: column;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 0.7em;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  position: relative; overflow: hidden; text-decoration: none;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.home-content-wrapper .category-item:hover,
.home-content-wrapper .event-card:hover { transform: scale(1.02); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.home-content-wrapper .category-item-text,
.home-content-wrapper .event-card-name {
  color: #FFFFFF; font-size: clamp(1.3em, 2.5vw, 1.8em);
  text-align: center; font-weight: bold; position: relative; z-index: 2;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); padding: 0.5em;
}
.home-content-wrapper .event-card-description {
  color: #FFFFFF; font-size: clamp(0.8em, 1.8vw, 0.9em);
  text-align: center; font-weight: normal; position: relative; z-index: 2;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  padding: 0 0.5em 0.5em 0.5em; margin-top: 0.3em;
}

@media (min-width: 768px) {
    .home-content-wrapper .week-featured-container,
    .home-content-wrapper .featured-art-container { flex-direction: row; text-align: left; }
    .home-content-wrapper .week-featured-item,
    .home-content-wrapper .featured-art-details { align-items: flex-start; text-align: left; }
    .home-content-wrapper .week-featured-art-gallery,
    .home-content-wrapper .gallery-title { align-items: flex-start; text-align: left; }
    .home-content-wrapper .featured-art-details { text-align: left; }
    .home-content-wrapper .categories-container,
    .home-content-wrapper .events-container { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
}

@media (max-width: 480px) {
    .content-main-image img { height: 30em; max-height: 65vh; }
    .home-content-wrapper .featured-line { width: 90%; margin-left: 5%; margin-right: 5%; }
    .home-content-wrapper .section-title { margin-left: 0.5em; } /* Keep this if titles are left-aligned on mobile by default */
    .home-content-wrapper .categories-container,
    .home-content-wrapper .events-container { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}