/* 
 * Finest At Sea - Responsive Styles
 * Media queries and responsive adjustments
 * Organized by breakpoint: desktop-first approach
 * 
 * Breakpoints:
 * - 1200px and above: Default styles (no media query)
 * - 992px - 1199px: Large tablets/small desktops
 * - 768px - 991px: Tablets
 * - 577px - 767px: Large mobile devices
 * - 480px - 576px: Medium mobile devices
 * - Below 480px: Small mobile devices
 */

/* ==========================================================================
   Global Layout Styles
   ========================================================================== */

.logo img {
  width: 295px;
}

.menu-toggle,
.close-menu {
  display: none;
  padding: var(--spacing-xs);
}

.menu-heading {
  width: 100%;
}

.menu-text {
  padding: var(--spacing-lg);
}

.market-hours,
.foodtruck-hours {
  grid-row: 7/8;
}

/* ==========================================================================
   Hero Section Layout
   ========================================================================== 
   <!-- Hero Component Example -->
    <div class="hero__container background-image-section">
      <div class="hero__content hero__content-top-right animate-on-scroll">        
        <h2 class="hero__title">
          Proudly BC Owned And Operated
        </h2>
        <h3 class="hero__subtitle">
          Victoria, British Columbia, Canada
        </h3>
        <p class="hero__description">
          Local Seafood Market & Sustainable Fishery
        </p>
      </div>
    </div>
   */

.hero__container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    color: var(--text-dark);
    background-size: cover;
    background-repeat: no-repeat;
    height: 40vh;
    min-height: 440px;
}
.hero__content-top-right {
  grid-row-start: 1;
  grid-column-start: 6;
  grid-column-end: 9;
}
.hero__content-top-left {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: 4;
}
.hero__content-bottom-right {
  grid-row-start: 8;
  grid-column-start: 6;
  grid-column-end: 9;
}
.hero__content-bottom-left {
  grid-row-start: 8;
  grid-column-start: 1;
  grid-column-end: 4;
}
.hero__content {
  padding: 1rem 1.5rem; 
}  
/* h2.hero__title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background-color: var(--medium-teal);
} */
.hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--dark-teal);
}
.hero__subtitle {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-md);
  color: var(--text-medium);
}
p.hero__description {
  margin-bottom: var(--spacing-xs);
  line-height: 1.6;
}
/* End Hero Section */
parallax-layers
 {
    display: block;
    z-index: 1;
    position: relative;
}
/* ==========================================================================
   Story Section Layout
   ========================================================================== 
<!-- Story Section Component Example -->
<section class="story-section bg-dark-teal">
  <div class="story-container">
    <div class="section-title">
      <h2 class="text-light">
        It takes a village. <br>
        We're proud to be a part of yours
      </h2>
    </div>
    <div class="story-content-flex">
      <div class="story-content animate-on-scroll animated">
          <h3>Bob Caught The Fish</h3>
          <h3>Kevin Made The Traps</h3>
          <h3>and Sam Filleted Your Order By Hand this Morning</h3>
          <p>
            From our fishermen to your plate. The seafood you get from
            Finest At Sea is locally sourced and sustainably caught by our
            West Coast fishermen. Our team handles every part of the
            process, from freezing your fish fresh at sea, to unloading,
            storage, preparation, processing, and selling in our local
            market or food truck.
          </p>
          <p>
            All by hand. All with care. That's a truly sustainable system.
          </p>
        </div>
      <div class="story-content-images">
      <img src="assets/img/community-img-1.jpeg" alt="">
        <parallax-layers>
          <img src="assets/img/community-img-1.jpeg" slot="layer"
            alt=""
            data-speed="0.1" 
            data-z="1"
            data-scale="0.15"
            data-initial-x="5%"
            data-initial-y="5%">
          <img src="assets/img/community-img-2.jpg" slot="layer" alt=""            
            data-speed="2" 
            data-z="2"
            data-scale="0.2"
            data-initial-x="55%"
            data-initial-y="0%">
          <img src="assets/img/community-img-4.jpg" slot="layer" alt=""            
            data-speed="1" 
            data-z="3"
            data-scale="0.5"
            data-initial-x="-35%"
            data-initial-y="-50%">
        </parallax-layers>
      </div>
    </div>
  </div>
</section>
   */
section.story-section {
    position: relative;
    padding: var(--spacing-md);
}
section.story-section h1, section.story-section h2, section.story-section h3 {
    margin-bottom: var(--spacing-lg);
}
 .story-container {
    padding: 1rem var(--spacing-md);
 }
 .story-section .section-title {
    text-align: center;    
    z-index: 3;
    position: relative;
 }
 .story-content h3, .story-content p {
  color: var(--text-light);
}
 .story-flex-container {
  display: flex;
  flex-direction:row;
  gap: var(--spacing-md);
  align-items: center;
}
 .story-content {
  display: inline-block;
  z-index: 2;
  flex: 1 1 66%;
 }
 .story-content-images {
    flex:1 1 33%;
 }
 .story-content-images parallax-layers {
    flex:1 1 33%;
 }
 .story-content-images img {
    max-width: 100%;
 }
 .story-content-50 {
  flex: 1 1 50%;
 }
 .story-content-40 {
  flex: 1 1 40%;
 }
 .story-content-30 {
  flex: 1 1 30%;
 }
 .story-content-50 img {
  max-width: 95%;
 }

  
 .bg-dark-teal .story-content p, .bg-dark-teal .story-content h3 {
  text-shadow: 
    1px 1px 1px var(--dark-teal),
    2px 2px 3px var(--dark-teal),
    -1px 0px 1px var(--dark-teal);
  }

   

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Header */
header {
  padding: var(--spacing-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Navigation */
.nav-menu {
  display: flex;
  gap: var(--spacing-md);
}

/* Grid Layouts */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Flex Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

/* Spacing Utilities */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Responsive Utilities */
.hidden {
  display: none;
}

/* Layout-specific styles */
.main-content {
  min-height: calc(100vh - 200px); /* Adjust based on header/footer height */
  padding: var(--spacing-lg) 0;
}

/* Responsive adjustments will be added in their respective media queries below */

/* ==========================================================================
   Base responsive styles (applied to all screen sizes)
   ========================================================================== */

/* About Page Components */


.timeline-section__title {
  text-align: center;
}

.timeline-section__title h2 {
  position: relative;
}

.timeline-section__title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Utility Classes */

/* ==========================================================================
   About Page Components
   ========================================================================== */

/* Timeline Layout */
.timeline__item {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  position: relative;
  padding: var(--spacing-lg);
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.timeline__marker {
  position: absolute;
  top: 20px;
  left: -40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.timeline__content {
  flex: 0 0 60%;
  padding-right: var(--spacing-lg);
}

.timeline__image {
  flex: 0 0 40%;
}

.timeline__image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.flex {
  display: flex;
}

/* Menu Layout */
.menu-category__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.menu-name-item-flex {
  display: flex;
  justify-content: space-between;
}

/* Contact Item Layout */
.contact-item {
  display: flex;
  align-items: flex-start;
}

/* Footer Layout */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.footer-column {
  flex: 1 1 250px;
}

/* Products Grid Layout */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

/* Section Layout */
.section-flex {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

.info-cards {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  align-content: space-evenly;
  gap: var(--spacing-lg);
}

.info-card {
  flex: 1 1 300px;
}

.community-content h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
}


/* Navigation Layout */
nav ul {
  display: flex;
  list-style: none;
}

nav li {
  margin-left: var(--spacing-md);
}

/* Header Layout */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: none;
}

/* Contact Section Layout */
.contact-info__features {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.contact-info__feature {
  flex: 1 1 calc(33.333% - var(--spacing-lg));
  min-width: 280px;
}

.contact-info__social-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* CTA Section Layout */
.cta-section__button-group {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

/* ==========================================================================
   Education Section Components
   ========================================================================== */

.education-section__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.education-section__header {
  text-align: center;
}

.education-section__description {
  max-width: 800px;
  margin: 0 auto;
}

.education-section__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.education-section__text {
  flex: 1;
}

.education-section__image {
  flex: 1;
  max-width: 50%;
}

.education-section__image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.education-section__video {
  flex: 1;
}

.education-section__videos {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* ==========================================================================
   Fleet Section Components
   ========================================================================== */

.gallery-section__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.gallery-section__header,
.gallery-section__subheader {
  text-align: center;
}

.gallery-section__description {
  max-width: 800px;
  margin: 0 auto;
}

.gallery-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
}

.gallery-section__item {
  position: relative;
  overflow: hidden;
  height: 260px;
  display: flex;
  flex-direction: column;
}

.gallery-section__image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-section__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-section__details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding: 0;
  text-align: center;
  background-color: rgba(0, 75, 80, 0.9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   Menu Section Components
   ========================================================================== */

.menu-section {
  padding: var(--spacing-xl) 0;
}

.menu-section__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.menu-section__heading {
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.menu-section__text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
}

.menu-section__category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.menu-section__category {
  border-radius: 8px;
  padding: var(--spacing-md);
}

.menu-section__category-title {
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.menu-section__item {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-sm);
}

.menu-section__item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-section__item-description {
  margin-top: var(--spacing-sm);
}

/* ==========================================================================
   Education Page Layout
   ========================================================================== */

/* Page Banner */
.education-banner {
  padding: var(--spacing-xl) 0;
  text-align: center;
}

/* Feature Boxes */
.education-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.education-feature {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
}

.education-feature__icon {
  margin-bottom: var(--spacing-md);
}

/* Content Panel Layout */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.content-body {
  order: 1;
}

.content-media {
  order: 2;
}

/* Alternate layout for sections */
.sustainable-section .content-grid,
.ecology-section .content-grid {
  grid-template-columns: 1.2fr 1fr;
}

.frozen-section .content-grid,
.traceability-section .content-grid {
  grid-template-columns: 1fr 1.2fr;
}

.frozen-section .content-body,
.traceability-section .content-body {
  order: 2;
}

.frozen-section .content-media,
.traceability-section .content-media {
  order: 1;
}

/* Practice Items */
.sustainable-practices {
  margin: var(--spacing-lg) 0;
}

/* Process Steps */
.process-steps {
  margin: var(--spacing-xl) 0;
}

/* Ecology Pillars */
.ecology-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

/* Traceability Features */
.traceability-features {
  margin: var(--spacing-xl) 0;
}

/* Education Programs */
.education-programs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

/* ==========================================================================
   Market Section Components
   ========================================================================== */

.market-section {
  padding: var(--spacing-xl) 0;
}

.market-section__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.market-section__header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.market-section__description {
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
}

.market-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.market-section__item {
  border-radius: 8px;
  padding: var(--spacing-md);
}

.market-section__item-title {
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.market-section__item-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.market-section__item-list li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--background-light);
}

.market-section__item-list li:last-child {
  border-bottom: none;
}

.market-section__item-note {
  margin-top: var(--spacing-sm);
}

.market-section__item-link {
  display: inline-block;
  margin-top: var(--spacing-sm);
}

/* Community Section Grid */
.community-images-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.community-grid-content {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 9;
  object-fit: cover;
  color: white;
}

.community-image-1 {
  grid-row-start: 2;
  grid-row-end: 5;
  grid-column-start: 8;
  grid-column-end: 12;
  object-fit: cover;
}

.community-image-2 {
  grid-row-start: 1;
  grid-row-end: 9;
  grid-column-start: 11;
  grid-column-end: 15;
  object-fit: cover;
}

.community-image-3 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 7;
  grid-column-end: 11;
  object-fit: cover;
}

.community-image-4 {
  grid-row-start: 3;
  grid-row-end: 7;
  grid-column-start: 12;
  grid-column-end: 15;
  object-fit: cover;
}

/* Header and Navigation */
.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
     Navigation Components
     ========================================================================== */

.main-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__item {
  margin-left: var(--spacing-md);
}

.main-nav__item:first-child {
  margin-left: 0;
}

.main-nav__link {
  position: relative;
  padding-bottom: 5px;
  display: inline-block;
}

.header__menu-toggle {
  display: none;
}



.page-main-heading {
  font-size: 3.5rem;
  margin: var(--spacing-md);
}

/* About Page Components */

/* Timeline Section */
.timeline__item {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  position: relative;
  padding: var(--spacing-lg);
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.timeline__marker {
  position: absolute;
  top: 20px;
  left: -40px;
  width: 40px;
  height: 40px;
  background-color: var(--bright-teal);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}

.timeline__content {
  flex: 0 0 60%;
  padding-right: var(--spacing-lg);
}

.timeline__image {
  flex: 0 0 40%;
}

.timeline__image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
     CTA Section Components
     ========================================================================== */

.cta-section {
  width: 100%;
  display: block;
}

.cta-section__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: var(--spacing-md);
}

.cta-section__title,
.cta-section__description {
  text-align: center;
}

/* ==========================================================================
     Contact Page Components
     ========================================================================== */



/* Contact Info Layout */
.contact-info__container,
.contact-map__container,
.contact-form__container {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-info__feature {
  text-align: center;
}

/* Contact Map Layout */
.contact-map__header {
  text-align: center;
}

.contact-map__title {
  position: relative;
  display: inline-block;
}

.contact-map__title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
}

.contact-map__info {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.contact-map__directions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.contact-map__direction-item {
  display: flex;
  flex-direction: column;
}

.contact-map__direction-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Contact Form Layout */
.contact-form__section-title {
  text-align: center;
}

.contact-form__content {
  display: flex;
  justify-content: space-between;
}

.contact-form {
  flex: 0 0 60%;
  position: relative;
  z-index: 1;
}

.contact-info {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
}

.contact-info__content {
  flex: 1;
}

/* Social Links */
.social-links {
  display: flex;
  gap: var(--spacing-sm);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Large tablets/small desktops (993px - 1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
/* Hero Section Layout */
   .hero__container {
    height: 40vh;
    min-height: 420px;
   }
   .hero__title {
   font-size: 2rem;
   }
   .hero__subtitle {
   font-size: 1rem;
   }
   /* End Hero Section */

  .section-flex {
    flex-direction: row;
  }

  /* Fleet Section */
  .gallery-section {
    padding: var(--spacing-lg) 0;
  }

  .gallery-section__container {
    padding: 0 var(--spacing-sm);
  }

  .gallery-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: 0 var(--spacing-sm);
  }

  .gallery-section__item {
    height: 300px;
  }

  /* Contact Section */
  .contact-form__content {
    flex-direction: column;
  }

  .contact-form,
  .contact-info {
    flex: 0 0 100%;
    margin-bottom: var(--spacing-lg);
  }
}

/* ==========================================================================
     Tablets (769px - 992px)
     ========================================================================== */
@media (max-width: 992px) {

  .container {
    max-width: 98%;
  }

  /* Hero Section Layout */
  .hero__container {
    height: 40vh;
    min-height: 400px;
  }
  .hero__content-top-right {
    grid-column-start: 5;
    grid-column-end: 9;
   }
   .hero__content-top-left {
     grid-column-start: 1;
     grid-column-end: 5;
   }
   .hero__content-bottom-right {
    grid-column-start: 5;
    grid-column-end: 9;
   }
   .hero__content-bottom-left {
    grid-column-start: 1;
    grid-column-end: 5;
   }
  /* End Hero Section */

  /* Story Section */
  section.story-section h1, section.story-section h2, section.story-section h3 {
    margin-bottom: var(--spacing-md);
  }

  /* Navigation */
  .header__menu-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    z-index: 1001;
    padding: var(--spacing-xl) var(--spacing-lg);
    overflow-y: auto;
  }

  .main-nav--open {
    right: 0;
  }

  .main-nav__list {
    flex-direction: column;
    margin-top: var(--spacing-xxl);
    display: none;
  }

  .main-nav--open .main-nav__list {
    display: flex;
  }

  .main-nav__item {
    margin: var(--spacing-xs) 0;
    width: 100%;
  }

  .main-nav__link {
    display: block;
    padding: var(--spacing-sm) 0;
    width: 100%;
    border-bottom: 1px solid var(--pale-grey);
  }


  /* Market Section */
  /* Market Section Responsive */
  .market-section__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .market-section__container {
    padding: 0 var(--spacing-sm);
  }

  .market-section__description {
    padding: 0 var(--spacing-sm);
  }

  .market-section__item {
    padding: var(--spacing-sm);
  }

  .market-section__item-list li {
    font-size: 0.8rem;
  }

  /* Menu Section Responsive */
  .menu-section__category-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .menu-section__container {
    padding: 0 var(--spacing-sm);
  }

  .menu-section__text {
    padding: 0 var(--spacing-sm);
  }

  .menu-section__heading {
    width: 100%;
    object-fit: contain;
  }

  /* Contact Map */
  .contact-map__directions {
    grid-template-columns: 1fr;
  }

  .contact-map__direction-title {
    font-size: 1.1rem;
  }

  .contact-map__direction-title i {
    font-size: 1.3rem;
  }

  /* Footer adjustments */
  .footer-container {
    gap: var(--spacing-md);
  }

  /* Hide story accents */
  .rustic-accent {
    display: none;
  }

  .education-features,
  .education-programs {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-grid,
  .sustainable-section .content-grid,
  .frozen-section .content-grid,
  .traceability-section .content-grid {
    grid-template-columns: 1fr;
  }

  .content-body,
  .content-media {
    order: initial !important;
  }

  /* Contact Page Responsive */
  .contact-form__content {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .contact-form,
  .contact-info {
    flex: 0 0 100%;
  }

  .contact-map__directions {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Education Section */
  .education-section {
    padding: var(--spacing-lg) 0;
  }

  .education-section__container {
    padding: 0 var(--spacing-sm);
  }

  .education-section__content {
    flex-direction: column;
  }

  .education-section__image {
    max-width: 100%;
    margin-top: var(--spacing-md);
  }

  .education-section__image img {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .education-section__videos {
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
  }

  .education-section__title {
    font-size: 1.75rem;
  }

  .education-section__description {
    padding: 0 var(--spacing-sm);
  }

  /* Typography */
  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  h2::after {
    left: 45%;
  }

  .services-background {
    height: 950px;
    width: auto;
  }

  .section-flex {
    flex-direction: column;
  }

  /* Timeline Section */
  .timeline__item {
    flex-direction: column;
    text-align: center;
  }

  .timeline__marker {
    position: static;
    margin-bottom: var(--spacing-sm);
  }

  .timeline__content,
  .timeline__image {
    flex: 0 0 100%;
    margin-bottom: var(--spacing-md);
  }

  /* Community Grid */
  .community-images-grid {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }

  .community-grid-content {
    grid-column-start: 1;
    grid-column-end: 15;
    grid-row-start: 6;
    grid-row-end: 8;
  }

  .community-image-1 {
    object-fit: cover;
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 5;
  }

  .community-image-2 {
    object-fit: cover;
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 5;
    grid-column-end: 11;
  }

  .community-image-3 {
    object-fit: cover;
    display: none;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .community-image-4 {
    object-fit: cover;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 5;
    grid-column-end: 8;
  }

  /* Services */
  .services-background {
    height: 950px;
    width: auto;
  }
}

/* ==========================================================================
   Large mobile devices (577px - 768px)
   ========================================================================== */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .container {
    padding: 0 var(--spacing-md);
  }
  .page-main-heading {
    font-size: 2.5rem;
  }
    /* Hero Section Layout */
    .hero__container {
      height: 40vh;
      min-height: 400px;
    }
    .hero__content-top-right {
      grid-column-start: 1;
      grid-column-end: 9;
     }
     .hero__content-top-left {
       grid-column-start: 1;
       grid-column-end: 9;
     }
     .hero__content-bottom-right {
      grid-column-start: 1;
      grid-column-end: 9;
     }
     .hero__content-bottom-left {
      grid-column-start: 1;
      grid-column-end: 9;
     }
     .hero__title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: var(--spacing-sm);
      color: var(--dark-teal);
      text-align: center;
    }
    .hero__subtitle {
      font-size: 0.7rem;
      margin-bottom: var(--spacing-xs);
      color: var(--text-medium);
      text-align: center;
    }
    p.hero__description {
      margin-bottom: var(--spacing-xs);
      line-height: 1.6;
      text-align: center;
    }
    /* End Hero Section */

  .story-flex-container {
      flex-direction: column;
  }

  /* Header adjustments */
  .header-container {
    flex-direction: column;
    text-align: center;
  }

  .logo {
    margin-bottom: var(--spacing-sm);
  }

  /* Navigation */
  nav ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  nav li {
    margin: 0 var(--spacing-sm);
  }

  /* Section adjustments */
  section {
    padding: var(--spacing-lg) 0;
  }

  /* Navigation Layout */
  .header-container {
    flex-wrap: wrap;
  }

  .logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
    position: relative;
  }

  .logo a {
    display: inline-block;
    text-align: center;
  }

  .logo .hamburger {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .hamburger {
    display: block;
  }

  nav {
    width: 100%;
    padding: 0 1rem;
    z-index: 100;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
  }

  nav.active {
    max-height: 500px;
    opacity: 1;
    padding: 1rem;
  }

  nav ul {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
  }

  .menu-category__grid {
    grid-template-columns: repeat(1, 1fr);
  }

  /* Contact Page Mobile */
  .contact-map__directions {
    grid-template-columns: 1fr;
  }

  .contact-hero {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .contact-info__feature {
    padding: var(--spacing-md);
    flex-basis: 100%;
  }

  .contact-info__features {
    flex-direction: column;
  }

  .contact-hero__title {
    font-size: 2.5rem;
  }

  .contact-hero__subtitle {
    font-size: 1rem;
  }

  /* CTA Section */
  .cta-section {
    padding: var(--spacing-lg) 0;
  }

  .cta-section__container {
    padding: var(--spacing-md);
  }

  .cta-section__title {
    font-size: 2rem;
  }

  .cta-section__description {
    font-size: 1rem;
  }

  .cta-section__button-group {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .cta-section__button {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }

  .education-features,
  .education-programs,
  .ecology-pillars {
    grid-template-columns: 1fr;
  }

  .process-step {
    flex-direction: column;
  }

  .step-number {
    margin-bottom: var(--spacing-sm);
  }
}

/* ==========================================================================
   Medium mobile devices (480px - 576px)
   ========================================================================== */
@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0 var(--spacing-md);
  }
    /* Hero Section Layout */
    .hero__container {
      height: 40vh;
      min-height: 400px;
    }
    /* End Hero Section */


  /* Adjust typography */
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  /* Buttons */
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  /* Forms */
  .form-group {
    margin-bottom: var(--spacing-sm);
  }

  input[type="text"],
  input[type="email"],
  textarea {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Small mobile devices (below 480px)
   ========================================================================== */
@media (max-width: 479px) {
  html {
    font-size: 14px;
  }

  /* Adjust typography */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  /* Hide elements on small screens */
  .hide-on-mobile {
    display: none !important;
  }

  /* Adjust spacing */
  .section-padding {
    padding: var(--spacing-lg) 0;
  }
}

/* ==========================================================================
   Landscape orientation adjustments
   ========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
  nav {
    overflow-y: scroll;
  }

  .services-background {
    height: 1050px;
  }
}

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  header,
  footer,
  .hero,
  .contact-form,
  .btn {
    display: none;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .container {
    max-width: 100%;
    width: 100%;
  }
}