<section
  id="service-events-section"
  class="w-full py-20"
  data-component-type="Content"
>

  <!-- TOP TITLE AREA -->
  <div class="text-center px-4">

    <p
      data-node="service_events_subtitle"
      data-node-type="text"
      data-node-label="Service Events Subtitle"
      data-node-default="OUR SERVICES"
      class="service-events-subtitle"
    >
      {{service_events_subtitle}}
    </p>

    <h2
      data-node="service_events_title"
      data-node-type="text"
      data-node-label="Service Events Title"
      data-node-default="We Hold Events"
      class="service-events-title mt-2"
    >
      {{service_events_title}}
    </h2>

    <p
      data-node="service_events_description"
      data-node-type="text"
      data-node-label="Service Events Description"
      data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed consectetur feugiat ut sed."
      class="service-events-desc max-w-[1100px] mx-auto mt-6"
    >
      {{service_events_description}}
    </p>

  </div>

  <!-- MAIN GRID -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 mt-16 px-[96px] service-events-container">

    <!-- LEFT IMAGE BLOCK -->
    <div class="w-full relative">

      <img
        data-node="service_events_left_image"
        data-node-type="file"
        data-node-label="Service Events Left Image"
        data-node-default="../assets/service_events/service discount.webp"
        src="{{service_events_left_image}}"
        class="w-full h-full object-cover rounded-md service-events-left-img"
      />

      <div class="absolute top-10 left-8 right-8">

        <h3
          data-node="service_events_offer_title"
          data-node-type="text"
          data-node-label="Service Events Offer Title"
          data-node-default="Give 10% on the Menu on Your Birthday"
          class="service-events-left-title"
        >
          {{service_events_offer_title}}
        </h3>

        <button
          data-node="service_events_cta_text"
          data-node-type="text"
          data-node-label="Service Events CTA Text"
          data-node-default="CONTACT US"
          class="service-events-left-btn mt-6"
        >
          {{service_events_cta_text}}
        </button>

      </div>
    </div>

    <!-- RIGHT TWO-COLUMN GRID -->
    <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-10">

      <!-- CARD 1 -->
      <div class="service-events-card">
        <p
          data-node="service_event_1_number"
          data-node-type="text"
          data-node-label="Service Event 1 Number"
          data-node-default="01 SERVICE"
          class="service-events-card-num"
        >
          {{service_event_1_number}}
        </p>

        <h4
          data-node="service_event_1_title"
          data-node-type="text"
          data-node-label="Service Event 1 Title"
          data-node-default="Holiday Parties"
          class="service-events-card-title"
        >
          {{service_event_1_title}}
        </h4>

        <p
          data-node="service_event_1_desc"
          data-node-type="text"
          data-node-label="Service Event 1 Description"
          data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed."
          class="service-events-card-text"
        >
          {{service_event_1_desc}}
        </p>
      </div>

      <!-- CARD 2 -->
      <div class="service-events-card">
        <p data-node="service_event_2_number" data-node-type="text" data-node-label="Service Event 2 Number" data-node-default="02 SERVICE" class="service-events-card-num">
          {{service_event_2_number}}
        </p>

        <h4 data-node="service_event_2_title" data-node-type="text" data-node-label="Service Event 2 Title" data-node-default="Corporate Events" class="service-events-card-title">
          {{service_event_2_title}}
        </h4>

        <p data-node="service_event_2_desc" data-node-type="text" data-node-label="Service Event 2 Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed." class="service-events-card-text">
          {{service_event_2_desc}}
        </p>
      </div>

      <!-- CARD 3 -->
      <div class="service-events-card">
        <p data-node="service_event_3_number" data-node-type="text" data-node-label="Service Event 3 Number" data-node-default="03 SERVICE" class="service-events-card-num">
          {{service_event_3_number}}
        </p>

        <h4 data-node="service_event_3_title" data-node-type="text" data-node-label="Service Event 3 Title" data-node-default="Anniversaries" class="service-events-card-title">
          {{service_event_3_title}}
        </h4>

        <p data-node="service_event_3_desc" data-node-type="text" data-node-label="Service Event 3 Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed." class="service-events-card-text">
          {{service_event_3_desc}}
        </p>
      </div>

      <!-- CARD 4 -->
      <div class="service-events-card">
        <p data-node="service_event_4_number" data-node-type="text" data-node-label="Service Event 4 Number" data-node-default="04 SERVICE" class="service-events-card-num">
          {{service_event_4_number}}
        </p>

        <h4 data-node="service_event_4_title" data-node-type="text" data-node-label="Service Event 4 Title" data-node-default="Private Dining" class="service-events-card-title">
          {{service_event_4_title}}
        </h4>

        <p data-node="service_event_4_desc" data-node-type="text" data-node-label="Service Event 4 Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed." class="service-events-card-text">
          {{service_event_4_desc}}
        </p>
      </div>

    </div>
  </div>

</section>

<style>
  /* ============================
   SERVICE EVENTS SECTION
============================ */

/* Subtitle */
.service-events-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 23.64px;
  font-weight: 500;
  line-height: 37.82px;
  text-transform: uppercase;
  color: #534931;
}

/* Main Title */
.service-events-title {
  font-family: 'Raleway', sans-serif;
  font-size: 70.91px;
  font-weight: 600;
  line-height: 85.09px;
  color: #534931;
}

/* Description */
.service-events-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 29.45px;
  font-weight: 400;
  line-height: 47.12px;
  color: #5C5C5C;
}

/* LEFT IMAGE */
.service-events-left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px !important; 
}

/* LEFT TITLE */
.service-events-left-title {
  font-family: 'Raleway', sans-serif;
  font-size: 47.27px;
  font-weight: 600;
  line-height: 66.18px;
  color: #534931;
}

/* LEFT BUTTON */
.service-events-left-btn {
  width: 226px;
  height: 88px;
  background: #B38E6A;
  border-radius: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20.68px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* CARD BOX */
.service-events-card {
  border: 1.48px solid #C3B2A5;
  padding: 40px;
  height: 348px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Card Number */
.service-events-card-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 23.64px;
  font-weight: 400;
  line-height: 37.82px;
  color: #534931;
  text-transform: uppercase;
}

/* Card Title */
.service-events-card-title {
  font-family: 'Raleway', sans-serif;
  font-size: 35.46px;
  font-weight: 600;
  line-height: 49.64px;
  color: #534931;
  margin-top: 10px;
}

/* Card Text */
.service-events-card-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 23.64px;
  font-weight: 400;
  line-height: 35.46px;
  color: #5C5C5C;
  margin-top: 10px;
}

/* ============================
   RESPONSIVE — LARGE LAPTOP
============================ */
@media (max-width: 1280px) {
  .service-events-title { font-size: 62px; line-height: 78px; }
  .service-events-desc { font-size: 26px; line-height: 40px; }
  .service-events-card { padding: 32px; }
}

/* ============================
   RESPONSIVE — TABLET (1024px)
============================ */
@media (max-width: 1024px) {
  .service-events-title { font-size: 50px; line-height: 64px; }
  .service-events-desc { font-size: 24px; line-height: 38px; }
  .service-events-left-title { font-size: 40px; line-height: 52px; }

  .service-events-card {
    height: auto;
    padding: 30px;
  }

  .service-events-left-btn {
    width: 200px;
    height: 70px;
    font-size: 18px;
  }
}

/* ============================
   RESPONSIVE — SMALL TABLET (768px)
============================ */
@media (max-width: 768px) {
  #service-events-section { padding: 60px 20px; }

  /* Titles */
  .service-events-title { font-size: 38px; line-height: 50px; }
  .service-events-desc { font-size: 20px; line-height: 32px; }
  .service-events-subtitle { font-size: 18px; }

  /* Left Image Title */
  .service-events-left-title {
    font-size: 32px;
    line-height: 46px;
  }

  .service-events-left-btn {
    width: 180px;
    height: 60px;
    font-size: 16px;
  }

  /* Cards */
  .service-events-card {
    padding: 24px;
  }

  .service-events-card-title {
    font-size: 28px;
    line-height: 40px;
  }

  .service-events-card-text {
    font-size: 18px;
    line-height: 28px;
  }
}

/* ============================
   RESPONSIVE — MOBILE (480px)
============================ */
@media (max-width: 480px) {

  #service-events-section { padding: 40px 16px; }

  /* Titles */
  .service-events-title {
    font-size: 30px;
    line-height: 42px;
  }
  .service-events-desc {
    font-size: 16px;
    line-height: 26px;
  }
  .service-events-subtitle {
    font-size: 16px;
    line-height: 26px;
  }

  /* Left Image Title */
  .service-events-left-title {
    font-size: 24px;
    line-height: 34px;
  }

  .service-events-left-btn {
    width: 160px;
    height: 55px;
    font-size: 14px;
  }

  /* Cards */
  .service-events-card {
    padding: 20px;
  }

  .service-events-card-title {
    font-size: 24px;
    line-height: 34px;
  }

  .service-events-card-text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Mobile & Tablet — ONLY 16px */
@media (max-width: 768px) {
  .service-events-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

</style>