/**
 * Shared responsive hero — all service detail pages
 * Load AFTER page-specific CSS
 */

/* ── Base (all breakpoints) ── */
.canteen-page .ccm-hero,
.lunch-page .cls-hero,
.delivery-page .domd-hero,
.bulk-page .bfs-hero,
.blc-page .blc-hero,
.ics-page .ics-hero,
.event-page .cec-hero,
.custom-plans-page .cml-hero,
.meal-plans-page .cmp-hero,
.weekly-menu-page .wm-hero {
  min-height: clamp(380px, 52vh, 520px);
  box-sizing: border-box;
}

.canteen-page .ccm-hero-inner,
.lunch-page .cls-hero-inner,
.delivery-page .domd-hero-inner,
.bulk-page .bfs-hero-inner,
.blc-page .blc-hero-inner,
.ics-page .ics-hero-inner,
.event-page .cec-hero-inner,
.custom-plans-page .cml-hero-inner,
.meal-plans-page .cmp-hero-inner,
.weekly-menu-page .wm-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding-top: clamp(96px, 14vw, 118px);
  padding-bottom: clamp(104px, 16vw, 128px);
  padding-left: max(20px, var(--site-container-padding-x, 12px));
  padding-right: max(20px, var(--site-container-padding-x, 12px));
  box-sizing: border-box;
}

.canteen-page .ccm-hero h1,
.lunch-page .cls-hero h1,
.delivery-page .domd-hero h1,
.bulk-page .bfs-hero h1,
.blc-page .blc-hero h1,
.ics-page .ics-hero h1,
.event-page .cec-hero h1,
.custom-plans-page .cml-hero h1,
.meal-plans-page .cmp-hero h1,
.weekly-menu-page .wm-hero h1 {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.canteen-page .ccm-hero-desc,
.lunch-page .cls-hero-desc,
.delivery-page .domd-hero-desc,
.bulk-page .bfs-hero-desc,
.blc-page .blc-hero-desc,
.ics-page .ics-hero-desc,
.event-page .cec-hero-desc,
.custom-plans-page .cml-hero-desc,
.meal-plans-page .cmp-hero-desc,
.weekly-menu-page .wm-hero-desc {
  max-width: 100%;
}

/* ── Tablet ── */
@media (max-width: 991px) {
  .canteen-page .ccm-hero,
  .lunch-page .cls-hero,
  .delivery-page .domd-hero,
  .bulk-page .bfs-hero,
  .blc-page .blc-hero,
  .ics-page .ics-hero,
  .event-page .cec-hero,
  .custom-plans-page .cml-hero,
  .meal-plans-page .cmp-hero,
  .weekly-menu-page .wm-hero {
    display: block;
    min-height: auto;
    height: auto;
    align-items: stretch;
  }

  .canteen-page .ccm-hero-inner,
  .lunch-page .cls-hero-inner,
  .delivery-page .domd-hero-inner,
  .bulk-page .bfs-hero-inner,
  .blc-page .blc-hero-inner,
  .ics-page .ics-hero-inner,
  .event-page .cec-hero-inner,
  .custom-plans-page .cml-hero-inner,
  .meal-plans-page .cmp-hero-inner,
  .weekly-menu-page .wm-hero-inner {
    padding-top: 92px;
    padding-bottom: 80px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }

  .canteen-page .ccm-hero h1,
  .lunch-page .cls-hero h1,
  .delivery-page .domd-hero h1,
  .bulk-page .bfs-hero h1,
  .blc-page .blc-hero h1,
  .ics-page .ics-hero h1,
  .event-page .cec-hero h1,
  .custom-plans-page .cml-hero h1,
  .meal-plans-page .cmp-hero h1,
  .weekly-menu-page .wm-hero h1 {
    font-size: clamp(1.65rem, 4.5vw, 2.25rem);
    line-height: 1.2;
  }

  .canteen-page .ccm-hero-desc,
  .lunch-page .cls-hero-desc,
  .delivery-page .domd-hero-desc,
  .bulk-page .bfs-hero-desc,
  .blc-page .blc-hero-desc,
  .ics-page .ics-hero-desc,
  .event-page .cec-hero-desc,
  .custom-plans-page .cml-hero-desc,
  .meal-plans-page .cmp-hero-desc,
  .weekly-menu-page .wm-hero-desc {
    font-size: 15px;
    line-height: 1.65;
  }
}

/* ── Phone ── */
@media (max-width: 767px) {
  .canteen-page .ccm-hero,
  .lunch-page .cls-hero,
  .delivery-page .domd-hero,
  .bulk-page .bfs-hero,
  .blc-page .blc-hero,
  .ics-page .ics-hero,
  .event-page .cec-hero,
  .custom-plans-page .cml-hero,
  .meal-plans-page .cmp-hero,
  .weekly-menu-page .wm-hero {
    display: block;
    min-height: auto;
    height: auto;
    align-items: stretch;
  }

  /* Stronger overlay for readability on small screens */
  .canteen-page .ccm-hero-overlay,
  .lunch-page .cls-hero-overlay,
  .delivery-page .domd-hero-overlay,
  .bulk-page .bfs-hero-overlay,
  .blc-page .blc-hero-overlay,
  .ics-page .ics-hero-overlay,
  .event-page .cec-hero-overlay,
  .custom-plans-page .cml-hero-overlay,
  .meal-plans-page .cmp-hero-overlay,
  .weekly-menu-page .wm-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(20, 12, 38, 0.92) 0%,
      rgba(35, 22, 62, 0.88) 45%,
      rgba(35, 22, 62, 0.94) 100%
    );
  }

  .canteen-page .ccm-hero-media,
  .lunch-page .cls-hero-media,
  .delivery-page .domd-hero-media,
  .bulk-page .bfs-hero-media,
  .blc-page .blc-hero-media,
  .ics-page .ics-hero-media,
  .event-page .cec-hero-media,
  .custom-plans-page .cml-hero-media,
  .meal-plans-page .cmp-hero-media,
  .weekly-menu-page .wm-hero-media {
    background-position: center 30%;
  }

  .canteen-page .ccm-hero-inner,
  .lunch-page .cls-hero-inner,
  .delivery-page .domd-hero-inner,
  .bulk-page .bfs-hero-inner,
  .blc-page .blc-hero-inner,
  .ics-page .ics-hero-inner,
  .event-page .cec-hero-inner,
  .custom-plans-page .cml-hero-inner,
  .meal-plans-page .cmp-hero-inner,
  .weekly-menu-page .wm-hero-inner {
    padding-top: 84px;
    padding-bottom: 36px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }

  /* No card overlap on phone — highlights stack cleanly below hero */
  .canteen-page .ccm-highlights,
  .lunch-page .cls-highlights,
  .delivery-page .domd-highlights,
  .bulk-page .bfs-highlights,
  .blc-page .blc-highlights,
  .ics-page .ics-highlights,
  .event-page .cec-highlights,
  .custom-plans-page .cml-highlights,
  .meal-plans-page .cmp-highlights,
  .weekly-menu-page .wm-highlights {
    margin-top: 0;
    margin-bottom: 40px;
    padding-top: 8px;
  }

  .canteen-page .ccm-hero-badge,
  .lunch-page .cls-hero-badge,
  .delivery-page .domd-hero-badge,
  .bulk-page .bfs-hero-badge,
  .blc-page .blc-hero-badge,
  .ics-page .ics-hero-badge,
  .event-page .cec-hero-badge,
  .custom-plans-page .cml-hero-badge,
  .meal-plans-page .cmp-hero-badge,
  .weekly-menu-page .wm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    padding: 5px 12px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
  }

  .canteen-page .ccm-hero h1,
  .lunch-page .cls-hero h1,
  .delivery-page .domd-hero h1,
  .bulk-page .bfs-hero h1,
  .blc-page .blc-hero h1,
  .ics-page .ics-hero h1,
  .event-page .cec-hero h1,
  .custom-plans-page .cml-hero h1,
  .meal-plans-page .cmp-hero h1,
  .weekly-menu-page .wm-hero h1 {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 10px;
  }

  .canteen-page .ccm-hero-desc,
  .lunch-page .cls-hero-desc,
  .delivery-page .domd-hero-desc,
  .bulk-page .bfs-hero-desc,
  .blc-page .blc-hero-desc,
  .ics-page .ics-hero-desc,
  .event-page .cec-hero-desc,
  .custom-plans-page .cml-hero-desc,
  .meal-plans-page .cmp-hero-desc,
  .weekly-menu-page .wm-hero-desc {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.9);
  }

  .canteen-page .ccm-hero-actions,
  .lunch-page .cls-hero-actions,
  .delivery-page .domd-hero-actions,
  .bulk-page .bfs-hero-actions,
  .blc-page .blc-hero-actions,
  .ics-page .ics-hero-actions,
  .event-page .cec-hero-actions,
  .custom-plans-page .cml-hero-actions,
  .meal-plans-page .cmp-hero-actions,
  .weekly-menu-page .wm-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .canteen-page .ccm-hero-actions [class*="-btn"],
  .lunch-page .cls-hero-actions [class*="-btn"],
  .delivery-page .domd-hero-actions [class*="-btn"],
  .bulk-page .bfs-hero-actions [class*="-btn"],
  .blc-page .blc-hero-actions [class*="-btn"],
  .ics-page .ics-hero-actions [class*="-btn"],
  .event-page .cec-hero-actions [class*="-btn"],
  .custom-plans-page .cml-hero-actions [class*="-btn"],
  .meal-plans-page .cmp-hero-actions [class*="-btn"],
  .weekly-menu-page .wm-hero-actions [class*="-btn"] {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    box-sizing: border-box;
    border-radius: 50px;
  }
}

/* ── Small phone ── */
@media (max-width: 575px) {
  .canteen-page .ccm-hero-inner,
  .lunch-page .cls-hero-inner,
  .delivery-page .domd-hero-inner,
  .bulk-page .bfs-hero-inner,
  .blc-page .blc-hero-inner,
  .ics-page .ics-hero-inner,
  .event-page .cec-hero-inner,
  .custom-plans-page .cml-hero-inner,
  .meal-plans-page .cmp-hero-inner,
  .weekly-menu-page .wm-hero-inner {
    padding-top: 78px;
    padding-bottom: 28px;
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }

  .canteen-page .ccm-hero h1,
  .lunch-page .cls-hero h1,
  .delivery-page .domd-hero h1,
  .bulk-page .bfs-hero h1,
  .blc-page .blc-hero h1,
  .ics-page .ics-hero h1,
  .event-page .cec-hero h1,
  .custom-plans-page .cml-hero h1,
  .meal-plans-page .cmp-hero h1,
  .weekly-menu-page .wm-hero h1 {
    font-size: 1.35rem;
  }

  .canteen-page .ccm-hero-desc,
  .lunch-page .cls-hero-desc,
  .delivery-page .domd-hero-desc,
  .bulk-page .bfs-hero-desc,
  .blc-page .blc-hero-desc,
  .ics-page .ics-hero-desc,
  .event-page .cec-hero-desc,
  .custom-plans-page .cml-hero-desc,
  .meal-plans-page .cmp-hero-desc,
  .weekly-menu-page .wm-hero-desc {
    font-size: 12.5px;
  }
}

@media (max-width: 380px) {
  .canteen-page .ccm-hero-inner,
  .lunch-page .cls-hero-inner,
  .delivery-page .domd-hero-inner,
  .bulk-page .bfs-hero-inner,
  .blc-page .blc-hero-inner,
  .ics-page .ics-hero-inner,
  .event-page .cec-hero-inner,
  .custom-plans-page .cml-hero-inner,
  .meal-plans-page .cmp-hero-inner,
  .weekly-menu-page .wm-hero-inner {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }

  .canteen-page .ccm-hero h1,
  .lunch-page .cls-hero h1,
  .delivery-page .domd-hero h1,
  .bulk-page .bfs-hero h1,
  .blc-page .blc-hero h1,
  .ics-page .ics-hero h1,
  .event-page .cec-hero h1,
  .custom-plans-page .cml-hero h1,
  .meal-plans-page .cmp-hero h1,
  .weekly-menu-page .wm-hero h1 {
    font-size: 1.25rem;
  }
}

/* ── Services listing page hero ── */
@media (max-width: 767px) {
  .services-page .svc-hero-content {
    align-items: flex-start;
    padding: 78px max(20px, env(safe-area-inset-left, 0px)) 28px max(20px, env(safe-area-inset-right, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .services-page .svc-hero-content .site-container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  .services-page .svc-hero-copy {
    max-width: 100%;
  }

  .services-page .svc-hero-badge {
    font-size: 9px;
    padding: 5px 12px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    white-space: normal;
    line-height: 1.35;
  }

  .services-page .svc-hero h1 {
    font-size: 1.45rem;
    line-height: 1.22;
    margin-bottom: 10px;
  }

  .services-page .svc-hero-sub {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 100%;
  }

  .services-page .svc-hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .services-page .svc-hero-btns a {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    padding: 11px 14px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }

  .services-page .svc-hero-stats {
    gap: 0.85rem;
    margin-top: 20px;
  }

  .services-page .svc-hero-stat .num {
    font-size: 1.25rem;
  }

  .services-page .svc-hero-visuals {
    display: none;
  }

  .services-page .svc-hero-spacer {
    height: auto;
    min-height: 520px;
  }

  .services-page .svc-hero-overlay {
    background: rgba(15, 10, 32, 0.82);
  }
}

@media (max-width: 575px) {
  .services-page .svc-hero-content {
    padding-top: 72px;
  }

  .services-page .svc-hero h1 {
    font-size: 1.3rem;
  }

  .services-page .svc-hero-spacer {
    min-height: 480px;
  }
}