/* ==========================================================================
   Anantasri Arth LLP — custom styles
   Everything Tailwind cannot express: 3D flip cards, carousel track,
   and a few brand type details.
   ========================================================================== */

:root {
  --navy: #163153;
  --cream: #f5efe1;
  --gold: #dbc392;
  --card: #fdfcfa;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  /* offset for the fixed header when jumping to an anchor */
  scroll-padding-top: 7rem;
}

/* The hidden attribute must ALWAYS beat utility display classes (.flex etc).
   Without this, Tailwind's .flex overrides the browser's weak [hidden] rule
   and the modal shows on page load and cannot be closed. */
[hidden] {
  display: none !important;
}

body {
  background-color: var(--cream);
  color: var(--navy);
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display {
  font-family: "Lora", Georgia, serif;
}

.font-label {
  font-family: "Work Sans", system-ui, sans-serif;
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   HERO CAROUSEL
   A horizontal track that slides. Each slide is a flex item at 100% width.
   -------------------------------------------------------------------------- */

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  width: 100%;
  transition: transform 0.6s var(--ease);
  will-change: transform;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
}

.carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Neutral (not blue) darkening so overlaid text stays legible without
   tinting the artwork. Used by the masthead and the customised band. */
.banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(0, 0, 0, 0.30) 45%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

/* Left-weighted version for banners whose copy sits on the left */
.banner-scrim--left {
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.42) 42%,
    rgba(0, 0, 0, 0.12) 72%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

/* Carousel slides carry the same neutral treatment via a pseudo element,
   so no extra markup is needed. Light slides opt out entirely. */
.carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.34) 55%,
    rgba(0, 0, 0, 0.46) 100%
  );
  pointer-events: none;
}

.carousel__slide--light::after {
  background: none;
}

.carousel__caption {
  z-index: 2;
}

.carousel__caption > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.carousel__slide.is-active .carousel__caption > * {
  opacity: 1;
  transform: translateY(0);
}

.carousel__slide.is-active .carousel__caption > *:nth-child(2) {
  transition-delay: 0.12s;
}

/* Phone layout: the wide landscape crop left the caption cramped over a
   short band. Per feedback the banner becomes a taller, near-square frame
   with smaller type, so the words have room to breathe. */
@media (max-width: 639px) {
  /* The two hero sentences were wrapping onto four lines. Sizing the type
     against the viewport width, with the explicit <br> as the only break,
     guarantees exactly one line per sentence at any phone width. */
  .hero-heading {
    font-size: clamp(0.72rem, 3.8vw, 1.1rem);
    white-space: nowrap;
  }

  .carousel__slide img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* The source banners are a wide ~3:1 crop. Squaring them off centre cut
     the Indian flag out of the last slide entirely, so that one anchors
     right — the flag then sits in the right edge of the frame, clear of
     the centred caption. Adjust the percentage to shift the crop. */
  .carousel__slide--light img {
    object-position: 100% center;
  }

  .carousel__caption {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .carousel__caption h3 {
    font-size: 1.3rem;
    line-height: 1.25;
    margin-bottom: 0.6rem;
  }

  .carousel__caption p {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}


.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(253, 252, 250, 0.85);
  color: var(--navy);
  border: 1px solid rgba(22, 49, 83, 0.15);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 10;
}

.carousel__btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

.carousel__btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.carousel__btn--prev { left: 1rem; }
.carousel__btn--next { right: 1rem; }

/* On phones the big chevrons crowded the frame. The carousel already
   auto-advances every 5s and supports swipe, so the arrows are hidden
   and the dots remain as the visible affordance. */
@media (max-width: 639px) {
  .carousel__btn { display: none; }
  .carousel__dot { width: 0.5rem; height: 0.5rem; }
  .carousel__dot.is-active { width: 1.4rem; }
}

.carousel__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  background: rgba(253, 252, 250, 0.5);
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}

.carousel__dot.is-active {
  background: #fff;
  width: 1.75rem;
}

/* --------------------------------------------------------------------------
   FLIP CARDS
   Pure CSS 3D flip on hover (desktop). On touch devices there is no hover,
   so main.js toggles .is-flipped on tap — the same transform drives both.
   -------------------------------------------------------------------------- */

.flip-card {
  perspective: 1400px;
  height: 22rem;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner,
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(22, 49, 83, 0.16);
}

.flip-card__back {
  transform: rotateY(180deg);
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem;
}

.flip-card__img {
  width: 100%;
  height: 65%;
  object-fit: cover;
  display: block;
}

.flip-card__label {
  height: 35%;
  background: var(--card);
  padding: 0.9rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Touch hint — only shown where hover is unavailable */
.flip-card__hint { display: none; }

@media (hover: none) {
  .flip-card__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  /* Disable the hover rule on touch so tap is the only trigger */
  .flip-card:hover .flip-card__inner {
    transform: none;
  }
  .flip-card.is-flipped .flip-card__inner {
    transform: rotateY(180deg);
  }
}

/* Shorter cards on small screens keep the grid tidy */
@media (max-width: 640px) {
  .flip-card { height: 20rem; }
}

/* --------------------------------------------------------------------------
   MOBILE CARD CAROUSELS
   The Figma mobile frame shows the card sections as one-card-at-a-time
   sliders with chevrons either side. On >=640px these revert to grids.
   -------------------------------------------------------------------------- */

.m-carousel { position: relative; }

.m-carousel__arrow {
  display: none;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: var(--navy);
  background: rgba(253, 252, 250, 0.9);
  border: 1px solid rgba(22, 49, 83, 0.15);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(22, 49, 83, 0.15);
}

.m-carousel__arrow--prev { left: -0.25rem; }
.m-carousel__arrow--next { right: -0.25rem; }

@media (max-width: 639px) {
  .m-carousel__arrow { display: grid; }

  .m-carousel__track {
    display: flex !important;      /* overrides the Tailwind grid utility */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1.25rem 0.5rem;
    scrollbar-width: none;
  }

  .m-carousel__track::-webkit-scrollbar { display: none; }

  .m-carousel__track > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */

/* Guarantees balanced headline wrapping regardless of the Tailwind CDN
   version in use — stops "guidance." dropping alone onto its own line. */
.text-balance {
  text-wrap: balance;
}

.panel-label-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.paper {
  background-color: var(--cream);
  background-image: radial-gradient(
    circle at 50% 0%,
    rgba(219, 195, 146, 0.22),
    transparent 60%
  );
}

.btn-primary {
  background: var(--navy);
  color: #fff;
  border-radius: 5px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn-primary:hover {
  background: #1e4270;
  transform: translateY(-2px);
}

.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.btn-outline {
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: 5px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.btn-outline:hover {
  background: var(--navy);
  color: #fff;
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}