/* ==========================================================================
   Harini Catering — responsive refinements
   Mobile-first rules live in style.css. This file steps up layouts.
   ========================================================================== */

@media (max-width: 575.98px) {
  :root {
    --fs-display: clamp(2.5rem, 10vw, 2.875rem);
    --fs-h2: clamp(1.75rem, 6.2vw, 2rem);
    --fs-h3: 1.35rem;
    --fs-body: 1rem;
    --fs-small: 0.8125rem;
    --fs-button: 0.875rem;
    --fs-caption: 0.75rem;
    --header-height: 68px;
    --lh-body: 1.7;
  }

  .home-hero {
    min-height: auto;
  }

  .home-hero__media .media-placeholder img {
    object-position: 70% 42%;
  }

  .home-hero.has-media .home-hero__media::after {
    background:
      linear-gradient(180deg, rgba(31, 14, 12, 0.28) 0%, rgba(31, 14, 12, 0.16) 28%, rgba(31, 14, 12, 0.48) 68%, rgba(31, 14, 12, 0.72) 100%),
      linear-gradient(105deg, rgba(31, 14, 12, 0.42) 0%, rgba(31, 14, 12, 0.18) 46%, transparent 78%);
  }

  .about-hero {
    min-height: auto;
  }

  .event-hero {
    min-height: auto;
  }

  .sweets-hero {
    min-height: auto;
  }

  .lunch-hero {
    min-height: auto;
  }

  .food-hero {
    min-height: auto;
  }

  .gallery-hero {
    min-height: auto;
  }

  .contact-hero {
    min-height: auto;
  }

  .about-hero__media .media-placeholder img,
  .event-hero__media .media-placeholder img,
  .sweets-hero__media .media-placeholder img,
  .lunch-hero__media .media-placeholder img,
  .food-hero__media .media-placeholder img,
  .contact-hero__media .media-placeholder img {
    object-position: 72% 42%;
  }

  .gallery-hero__media .media-placeholder img {
    object-position: 62% 42%;
  }

  .about-hero.has-media .about-hero__media::after,
  .event-hero.has-media .event-hero__media::after,
  .sweets-hero.has-media .sweets-hero__media::after,
  .lunch-hero.has-media .lunch-hero__media::after,
  .food-hero.has-media .food-hero__media::after,
  .gallery-hero.has-media .gallery-hero__media::after,
  .contact-hero.has-media .contact-hero__media::after {
    background:
      linear-gradient(180deg, rgba(31, 14, 12, 0.28) 0%, rgba(31, 14, 12, 0.16) 28%, rgba(31, 14, 12, 0.48) 68%, rgba(31, 14, 12, 0.72) 100%),
      linear-gradient(105deg, rgba(31, 14, 12, 0.42) 0%, rgba(31, 14, 12, 0.18) 46%, transparent 78%);
  }

  .home-hero__content {
    padding: 6.6rem 0 2.75rem;
  }

  .about-hero__content,
  .event-hero__content,
  .sweets-hero__content,
  .lunch-hero__content,
  .food-hero__content,
  .gallery-hero__content,
  .contact-hero__content {
    padding: 6.6rem 0 2.75rem;
  }

  .home-hero h1 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 10vw, 2.875rem);
    line-height: 1.14;
  }

  .about-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.5rem, 10vw, 2.875rem);
    line-height: 1.14;
  }

  .home-hero .lead {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 22rem;
  }

  .home-hero__offerings {
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    line-height: 1.7;
    padding-right: 3.6rem;
  }

  .band-gold {
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    padding: 0.95rem 4.75rem 0.95rem 0.9rem;
    line-height: 1.55;
    text-align: left;
  }

  .feature-panel__content {
    padding: 4.6rem 0 3.6rem;
  }

  .eyebrow {
    font-size: 0.75rem;
  }

  .section-copy,
  .lead {
    font-size: 1rem;
  }

  .occasion-list {
    grid-template-columns: 1fr;
    font-size: 1rem;
    gap: 0.7rem;
  }

  .feature-panel {
    min-height: 0;
  }

  .feature-panel__media::after {
    background: linear-gradient(180deg, rgba(31, 14, 12, 0.32) 0%, rgba(31, 14, 12, 0.5) 100%);
  }

  .gallery-preview__item:first-child {
    grid-column: span 2;
  }

  .page-hero {
    min-height: auto;
  }

  .page-hero__content {
    padding: 6.4rem 0 2.4rem;
  }

  .page-hero h1 {
    max-width: 10.5ch;
    font-size: clamp(2.2rem, 9vw, 2.55rem);
  }

  .btn-cta,
  .btn-cta-secondary,
  .btn-cta-gold,
  .btn-cta-whatsapp {
    min-height: 50px;
    width: 100%;
    font-size: 0.875rem;
  }

  .feature-panel .btn-cta-gold {
    width: max-content;
    max-width: 100%;
  }

  .cta-row {
    flex-direction: column;
  }

  .section > .container,
  .feature-panel > .container,
  .home-hero .container,
  .about-hero .container,
  .about-values .container,
  .event-hero .container,
  .event-cta .container,
  .sweets-hero .container,
  .sweets-cta .container,
  .lunch-hero .container,
  .lunch-cta .container,
  .food-hero .container,
  .food-cta .container,
  .gallery-hero .container,
  .gallery-cta .container,
  .contact-hero .container,
  .contact-cta .container,
  .site-footer > .container {
    padding-right: 4.5rem;
  }

  .footer-contact a,
  .footer-contact li {
    overflow-wrap: break-word;
  }

  .service-card__media .media-placeholder,
  .service-card--featured .service-card__media .media-placeholder {
    min-height: 230px;
  }

  .service-card__body {
    padding: 1.7rem 1.45rem 1.8rem;
  }

  .header-cta {
    width: 100%;
    margin: 1rem 0 0;
  }

  .floating-actions {
    right: 0.75rem;
    bottom: 0.85rem;
  }

  .floating-btn {
    width: 48px;
    height: 48px;
  }

  .scroll-top {
    right: 0.75rem;
    left: auto;
    bottom: 7.7rem;
  }

  .brand__tag {
    display: none;
  }

  .footer-brand p,
  .site-footer .brand {
    padding-right: 3.25rem;
  }

  .home-hero__emblem {
    width: 150px;
    height: 150px;
    opacity: 0.055;
    top: 8%;
    right: -8%;
  }

  .sweets-gallery .col-4:nth-child(2) {
    transform: none;
  }
}

@media (min-width: 576px) {
  .swatch-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .header-emblem img {
    height: 38px;
    max-width: min(32vw, 176px);
  }
}

@media (min-width: 768px) {
  .sweets-gallery .col-4:nth-child(2) {
    transform: translateY(1.15rem);
  }

  .food-mosaic {
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 1rem;
  }

  .food-mosaic__item:first-child {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }

  .food-mosaic__item:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }

  .food-mosaic__item:nth-child(5) {
    grid-column: 1;
    grid-row: 4;
  }

  .food-mosaic__item:nth-child(6) {
    grid-column: 2 / span 2;
    grid-row: 3 / span 2;
  }

  .food-mosaic__item:first-child .media-placeholder,
  .food-mosaic__item:nth-child(6) .media-placeholder {
    height: 100%;
  }

  .food-mosaic__item:first-child .media-placeholder::before,
  .food-mosaic__item:nth-child(6) .media-placeholder::before {
    padding-bottom: 0;
    height: 100%;
  }

  .why-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
  }

  .why-item {
    padding: 1.6rem 0;
  }

  .gallery-preview {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-preview__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery-preview__item:first-child .media-placeholder {
    height: 100%;
  }

  .gallery-preview__item:first-child .media-placeholder::before {
    padding-bottom: 0;
    height: 100%;
  }

  .editorial {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .editorial--reverse {
    direction: rtl;
  }

  .editorial--reverse > * {
    direction: ltr;
  }

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

  .swatch-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .section {
    padding: clamp(5.6rem, 8vw, 8.1rem) 0;
  }

  .page-hero {
    min-height: 48vh;
  }
}

@media (min-width: 992px) {
  .nav-toggle {
    display: none !important;
  }

  .header-bar {
    justify-content: flex-start;
  }

  .header-emblem {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .header-emblem img {
    height: 60px;
    max-width: min(36vw, 280px);
  }

  .site-header .brand {
    flex: 0 1 auto;
    margin-right: auto;
  }

  #primaryNav.offcanvas-lg {
    position: static;
    display: block;
    visibility: visible;
    transform: none;
    background: transparent;
    width: auto;
    height: auto;
    max-height: none;
    border: 0;
    overflow: visible;
    padding: 0;
  }

  .offcanvas-lg .offcanvas-header {
    display: none;
  }

  .offcanvas-lg .offcanvas-body {
    display: flex;
    align-items: center;
    padding: 0;
    overflow: visible;
  }

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

  .home-hero,
  .media-placeholder--hero {
    min-height: 88vh;
  }

  .why-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 2.75rem;
  }

  .lunch-media .media-placeholder {
    min-height: 420px;
  }
}

@media (min-width: 1200px) {
  .editorial {
    gap: 4.5rem;
  }
}

@media (max-width: 991.98px) {
  .primary-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    width: 100%;
  }

  .primary-nav .nav-link {
    padding: 0.85rem 0.4rem;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 1.05rem;
  }

  .primary-nav .nav-link.active::after {
    display: none;
  }

  .dropdown-menu {
    box-shadow: none;
    border: 0;
    padding: 0 0 0.4rem 0.8rem;
    position: static;
  }

  .header-cta {
    width: 100%;
    margin: 1rem 0 0;
  }

  #primaryNav.offcanvas-lg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1046;
    display: none;
    flex-direction: column;
    width: min(86vw, 340px);
    height: 100vh;
    height: 100dvh;
    background: var(--brand-light);
    visibility: hidden;
    transform: none;
    overflow-y: auto;
    padding: 0.75rem 1rem 1.5rem;
  }

  #primaryNav.offcanvas-lg.show,
  #primaryNav.offcanvas-lg.showing,
  #primaryNav.offcanvas-lg.hiding {
    display: flex;
    visibility: visible;
  }

  .offcanvas-backdrop {
    background: rgba(31, 14, 12, 0.48);
  }

  body.has-overlay-header .site-header:not(.is-scrolled):not(.is-open) .nav-toggle {
    background: #fffaf4;
    border-color: rgba(255, 248, 242, 0.55);
    color: var(--brand-primary);
  }

  .nav-toggle {
    display: inline-flex !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1;
    width: 44px !important;
    height: 44px !important;
    margin-left: auto;
    flex: 0 0 44px;
  }

  .header-bar {
    padding-right: 0.15rem;
  }
}