<section
  class="w-full bg-white py-14"
  data-component-type="Content"
>
  <div class="max-w-[1920px] mx-auto px-[96px] menu-promo-container">

    <div class="flex gap-10 promo-mobile-col">

      <!-- LEFT TALL IMAGE -->
      <div class="flex flex-col w-[399px] promo-mobile-full">
        <div class="relative h-[738px] overflow-hidden promo-img-block">

          <img
            data-node="promo_left_image"
            data-node-type="file"
            data-node-label="Left Promo Image"
            data-node-default="../assets/menu-promos/Left bowl.webp"
            src="{{promo_left_image}}"
            class="w-full h-full object-cover"
            alt="Left promo image"
          />

          <div class="absolute left-7 bottom-7 promo-text-top promo-text-bottom">

            <p
              data-node="promo_left_tag"
              data-node-type="text"
              data-node-label="Left Promo Tag"
              data-node-default="FREE"
              class="promo-small text-[23.64px] uppercase font-mont font-medium text-[#534931]"
            >
              {{promo_left_tag}}
            </p>

            <p
              data-node="promo_left_title"
              data-node-type="text"
              data-node-label="Left Promo Title"
              data-node-default="Every 5th Breakfast as a Gift."
              class="promo-big text-[35.47px] font-raleway font-semibold leading-[49px] text-[#534931]"
            >
              {{promo_left_title}}
            </p>

          </div>
        </div>
      </div>

      <!-- RIGHT CONTENT -->
      <div class="flex flex-col flex-1 gap-10 w-full">

        <!-- TOP ROW -->
        <div class="flex gap-10 promo-row-mobile">

          <!-- Coffee Napoleon -->
          <div class="relative w-[842px] h-[347px] overflow-hidden promo-img-block">

            <img
              data-node="promo_coffee_image"
              data-node-type="file"
              data-node-label="Coffee Napoleon Image"
              data-node-default="../assets/menu-promos/Coffee napolean.webp"
              src="{{promo_coffee_image}}"
              class="w-full h-full object-cover"
              alt="Coffee napoleon"
            />

            <div class="absolute left-7 top-7 promo-text-top">

              <p
                data-node="promo_coffee_title"
                data-node-type="text"
                data-node-label="Coffee Napoleon Title"
                data-node-default="Coffee Napoleon"
                class="promo-big text-[35.47px] font-raleway font-semibold text-[#534931] leading-[49px]"
              >
                {{promo_coffee_title}}
              </p>

              <p
                data-node="promo_coffee_subtitle"
                data-node-type="text"
                data-node-label="Coffee Napoleon Subtitle"
                data-node-default="Profit up to 35%"
                class="promo-small text-[23.64px] font-mont font-medium text-[#5C5C5C]"
              >
                {{promo_coffee_subtitle}}
              </p>

            </div>
          </div>

          <!-- JAR IMAGE -->
          <div class="w-[399px] h-[347px] overflow-hidden promo-img-block">
            <img
              data-node="promo_jar_image"
              data-node-type="file"
              data-node-label="Jar Promo Image"
              data-node-default="../assets/menu-promos/coffe right box.webp"
              src="{{promo_jar_image}}"
              class="w-full h-full object-cover"
              alt="Jar promo"
            />
          </div>

        </div>

        <!-- BOTTOM ROW -->
        <div class="flex gap-10 promo-row-mobile">

          <!-- CROISSANT -->
          <div class="w-[399px] h-[347px] overflow-hidden promo-img-block">
            <img
              data-node="promo_croissant_image"
              data-node-type="file"
              data-node-label="Croissant Promo Image"
              data-node-default="../assets/menu-promos/cyber wednesday left.webp"
              src="{{promo_croissant_image}}"
              class="w-full h-full object-cover"
              alt="Croissant promo"
            />
          </div>

          <!-- CYBER WEDNESDAY -->
          <div class="relative w-[842px] h-[347px] overflow-hidden promo-img-block">

            <img
              data-node="promo_cyber_image"
              data-node-type="file"
              data-node-label="Cyber Wednesday Image"
              data-node-default="../assets/menu-promos/cyber wednesday image.webp"
              src="{{promo_cyber_image}}"
              class="w-full h-full object-cover"
              alt="Cyber Wednesday"
            />

            <div class="absolute left-7 top-7 promo-text-top">

              <p
                data-node="promo_cyber_title"
                data-node-type="text"
                data-node-label="Cyber Wednesday Title"
                data-node-default="Cyber Wednesday!"
                class="promo-big text-[35.47px] font-raleway font-semibold text-[#534931] leading-[49px]"
              >
                {{promo_cyber_title}}
              </p>

              <p
                data-node="promo_cyber_subtitle"
                data-node-type="text"
                data-node-label="Cyber Wednesday Subtitle"
                data-node-default="Dessert day, second position for free."
                class="promo-small text-[23.64px] font-mont font-medium text-[#5C5C5C]"
              >
                {{promo_cyber_subtitle}}
              </p>

            </div>
          </div>

        </div>

      </div>
    </div>

  </div>
</section>

<style>
  /* ================================================
   🔶 LARGE DESKTOP ( ≥ 1440px and ≤ 1920px )
   Keep exact Figma sizes but adjust spacing
================================================ */
@media (max-width: 1536px) {
  .menu-promo-container {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }

  .promo-row-mobile,
  .promo-mobile-col {
    gap: 32px !important;
  }

  /* Scale down widths slightly */
  .promo-img-block {
    border-radius: 14px;
  }

  .promo-img-block img {
    border-radius: inherit;
  }

   .w-\[842px\] {
    width: 554px !important;
  }

  /* Maintain exact height */
  .h-\[347px\] {
    height: 347px !important;
  }
}


/* ================================================
   FIX for 1440px and smaller desktops
   Scale layout so all 5 blocks fit fully
================================================ */
@media (max-width: 1440px) {

  /* Reduce container padding */
  .menu-promo-container {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* Reduce gaps between all images */
  .promo-mobile-col,
  .promo-row-mobile {
    gap: 24px !important;
  }

  


   
}

/* ================================================
   🔷 DESKTOP ( ≤ 1280px )
   Reduce width ratios but keep 2-row layout
================================================ */
@media (max-width: 1280px) {

  /* Container padding */
  .menu-promo-container {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* Swap row gaps */
  .promo-row-mobile {
    gap: 28px !important;
  }


}


/* ================================================
   🔶 TABLET LANDSCAPE ( ≤ 1024px )
   Convert to 2-column layout
================================================ */
@media (max-width: 1024px) {

  .promo-mobile-col {
    flex-direction: column !important;
    width: 100% !important;
  }

  /* All items become fluid widths */
  .promo-mobile-col > div,
  .promo-row-mobile > div {
    width: 100% !important;
  }

  .promo-row-mobile {
    flex-direction: row !important;
    gap: 24px !important;
  }

  .promo-img-block {
    height: 300px !important;
  }

  /* Tall image becomes normal height */
  .promo-mobile-col .promo-img-block {
    height: auto !important;
  }
}












/* MOBILE STACKING — BELOW 768px */
@media (max-width: 768px) {

  /* Wrapper padding */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Main container becomes vertical */
  .promo-mobile-col {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Left tall image becomes full width */
  .promo-mobile-full {
    width: 100% !important;
    height: auto !important;
  }

  /* All right-side blocks stack */
  .promo-row-mobile {
    flex-direction: column !important;
    width: 100% !important;
    gap: 24px !important;
  }

  /* Every image container becomes full width */
  .promo-img-block {
    width: 100% !important;
    height: auto !important;
  }

  /* Make height auto to avoid cropping */
  .promo-img-block img {
    height: auto !important;
  }

  /* Move text slightly inward */
 .promo-text-top {
    left: 20px !important;
    top: 20px !important;
    bottom: auto !important;
  }

  /* Left tall image text stays bottom on mobile */
  .promo-text-bottom {
    left: 20px !important;
    bottom: 20px !important;
    top: auto !important;
  }
}

@media (max-width: 768px) {

  .menu-promo-container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ==============================
   MOBILE FONT SIZES (≤ 768px)
   ============================== */
@media (max-width: 768px) {

  /* Big Titles (Coffee, Cyber, Every 5th...) */
  .promo-big {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  /* Small Text (FREE, profit %, etc) */
  .promo-small {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  /* Text positioning mobile */
  .promo-text-top {
    left: 16px !important;
    top: 16px !important;
    bottom: auto !important;
  }

  .promo-text-bottom {
    left: 16px !important;
    bottom: 16px !important;
    top: auto !important;
  }

  /* Mobile container & image sizing */
  .promo-item-mobile {
    width: 100% !important;
    height: auto !important;
  }

}

/* Remove top padding on mobile only */
@media (max-width: 768px) {
  .py-14 {
    padding-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .gap-10 {
    gap: 1.5rem !important; /* or whatever size you want */
  }
}
</style>

