/* Home page sections */

/* ---- Hero ---- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 44vw, 720px);
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 112px);
  background: #1c0705;
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(22 7 4 / 0.9) 0%, rgb(22 7 4 / 0.78) 36%, rgb(22 7 4 / 0.3) 56%, transparent 70%),
    linear-gradient(0deg, rgb(22 7 4 / 0.45) 0%, transparent 25%);
}

.hero__inner {
  width: 100%;
}

.hero__copy {
  max-width: 640px;
}

.hero__eyebrow {
  margin-bottom: 14px;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.12;
  background: linear-gradient(180deg, #ffe48a 0%, var(--color-gold) 48%, #e08d12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgb(80 20 5 / 0.55));
  animation: rise 0.9s var(--ease-out) both;
}

.hero__subtitle {
  max-width: 30ch;
  margin-top: 18px;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  font-weight: 500;
  line-height: 1.45;
  color: #fff7ec;
}

.hero__points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 32px;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: #fbe9d0;
}

.hero__points li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__point-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  background: rgb(0 0 0 / 0.25);
  color: var(--color-gold);
}

.hero__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(28px, 4vw, 56px);
  fill: var(--color-cream);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@media (max-width: 1199px) {
  .hero__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 460px;
  }
}

@media (max-width: 767px) {
  .hero {
    align-items: flex-start;
    min-height: 0;
    padding-bottom: clamp(220px, 62vw, 320px);
    text-align: center;
  }
  .hero__media img {
    object-position: 50% 100%;
  }
  .hero__scrim {
    background: linear-gradient(180deg, rgb(22 7 4 / 0.88) 0%, rgb(22 7 4 / 0.78) 45%, rgb(22 7 4 / 0.25) 70%, transparent 85%);
  }
  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
  }
  .hero__subtitle {
    max-width: 26ch;
  }
  .hero__points {
    text-align: left;
  }
}

@media (max-width: 479px) {
  .hero__points {
    gap: 12px 10px;
  }
  .hero__point-icon {
    width: 34px;
    height: 34px;
  }
  .hero__cta {
    width: 100%;
  }
}

/* ---- Sections ---- */
.home-section {
  padding-block: var(--section-space);
}

.home-section--categories {
  padding-top: clamp(32px, 5vw, 56px);
}

.mobile-only-action {
  display: none;
  justify-content: center;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .mobile-only-action {
    display: flex;
  }
}

/* Categories */
.category-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.category__circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 50%;
  overflow: hidden;
  /* Pack photo ka background safed hai, isliye circle bhi safed - koi seam nahi dikhta */
  background: #fff;
  box-shadow: 0 10px 24px -16px rgb(91 15 18 / 0.5);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

/* Photo na ho to purana katori wala placeholder */
.category__circle--bowl {
  background: radial-gradient(circle at 50% 40%, #fff9f0, var(--color-peach) 75%);
}

/* Ring alag layer pe hai, warna photo uske upar aa jaata hai */
.category__circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--color-line);
  transition: box-shadow 0.3s;
  pointer-events: none;
}

.category__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.3s var(--ease-out);
}

.category__circle .bowl {
  width: 78%;
}

.category__circle .bowl--gift {
  width: 60%;
  margin: 0;
}

.category:hover .category__circle {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -16px rgb(91 15 18 / 0.6);
}

.category:hover .category__circle::after {
  box-shadow: inset 0 0 0 2px var(--color-gold);
}

.category:hover .category__photo {
  transform: scale(1.14);
}

.category__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
}

.category__alt {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-muted);
}

/* Side-scroll rows (tablet/mobile) */
.scroll-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

@media (max-width: 1023px) {
  .category-list {
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .category-list li {
    flex: 0 0 clamp(104px, 27vw, 140px);
    scroll-snap-align: start;
  }
}

@media (max-width: 1199px) {
  .scroll-row {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .scroll-row > li {
    flex: 0 0 clamp(200px, 30vw, 250px);
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .scroll-row > li {
    flex-basis: 64vw;
  }
}

/* Story */
.story {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(300px, 28vw, 380px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #1d0806;
  color: #fff;
  box-shadow: 0 24px 48px -28px rgb(60 15 5 / 0.8);
}

.story__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.story__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(24 8 5 / 0.92) 0%, rgb(24 8 5 / 0.75) 32%, rgb(24 8 5 / 0.1) 58%, transparent 70%);
}

.story__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(28px, 4vw, 48px);
}

.story__title {
  max-width: 16ch;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-gold);
}

.story__text {
  max-width: 40ch;
  color: #fbe9d0;
}

@media (max-width: 767px) {
  .story {
    grid-template-columns: 1fr;
    align-items: end;
    min-height: 460px;
  }
  .story__media img {
    object-position: 50% 0%;
  }
  .story__scrim {
    background: linear-gradient(0deg, rgb(24 8 5 / 0.96) 0%, rgb(24 8 5 / 0.85) 42%, rgb(24 8 5 / 0.15) 72%, transparent 85%);
  }
}

/* Features */
.features {
  padding-top: clamp(28px, 4vw, 40px);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-line);
  text-align: center;
}

.feature .icon {
  margin-bottom: 6px;
  color: var(--color-green);
}

.feature h3 {
  font-size: 1.15rem;
}

.feature p {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature {
    padding: 18px 12px;
  }
}

/* Pune / pincode banner */
.pune {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 30vw, 440px);
  overflow: hidden;
  background: linear-gradient(180deg, #fde3b8 0%, #f8c17a 60%, #ef9f55 100%);
}

.pune > .container {
  width: 100%;
}

.pune__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.pune__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.pune__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(253 232 196 / 0.96) 0%, rgb(253 232 196 / 0.86) 30%, rgb(253 232 196 / 0.35) 46%, transparent 58%);
}

.pune__copy {
  max-width: 480px;
  padding-block: clamp(32px, 5vw, 48px);
}

.pune__title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pune__pin {
  flex: none;
  margin-top: 6px;
  color: var(--color-red-dark);
}

.pune__title {
  display: flex;
  flex-direction: column;
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-maroon);
}

.pune__tagline {
  margin: 12px 0 20px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .pune {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .pune__copy {
    padding-bottom: 24px;
  }
  .pune__media {
    position: relative;
    order: 2;
    z-index: 0;
    aspect-ratio: 16 / 10;
  }
  .pune__scrim {
    background: linear-gradient(180deg, #f4b46c 0%, rgb(244 180 108 / 0) 22%);
  }
}

@media (max-width: 479px) {
  .pune .pincode-form {
    flex-direction: column;
    border-radius: var(--radius-md);
  }
  .pune .pincode-form input {
    min-height: 44px;
  }
  .pune .pincode-form .btn {
    border-radius: var(--radius-sm);
  }
}

/* Trust strip */
.trust {
  padding-top: clamp(32px, 5vw, 48px);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6e6, var(--color-peach));
  box-shadow: inset 0 0 0 1.5px #f2c98b;
  color: var(--color-red);
}

.trust__item h3 {
  font-size: 1.1rem;
}

.trust__item p {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
}

@media (max-width: 479px) {
  .trust__item {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .trust__icon {
    width: 56px;
    height: 56px;
  }
}