/* ==========================================================================
   AquaKhata — photographs
   --------------------------------------------------------------------------
   Every screen size. The pictures are scenes of the trade itself — the old
   khata, the godown, the pond, the hatchery, the counter — graded midnight
   and champagne. Three uses:
     .lx-band   a wide plate inside a section
     .lx-hp     a page-top hero with the photo behind its words
     .lx-cta    the closing band, over the ponds at dusk
   ========================================================================== */

.lx-band {
  position: relative;
  margin: 0 auto 56px;
  max-width: 1180px;
  aspect-ratio: 21 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: #051d2a;
  border: 1px solid rgba(201, 165, 94, 0.38);
  box-shadow: 0 44px 80px -44px rgba(6, 26, 40, 0.65), 0 0 0 8px rgba(201, 165, 94, 0.05);
}
.lx-band picture, .lx-band img { display: block; width: 100% !important; height: 100% !important; max-width: none; }
.lx-band img { object-fit: cover; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.lx-band:hover img { transform: scale(1.025); }
/* a soft vignette and a gold hairline inside the frame */
.lx-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(234, 211, 156, 0.18), inset 0 -60px 80px -40px rgba(5, 29, 42, 0.45);
}
/* inside a text column it sits under the words, a little taller */
.lx-band-col { margin: 30px 0 0; aspect-ratio: 16 / 10; }

/* ---------- page-top heroes with a photograph ---------- */
.page-hero.lx-hp {
  background:
    linear-gradient(180deg, rgba(5, 29, 42, 0.78) 0%, rgba(5, 29, 42, 0.62) 45%, rgba(5, 29, 42, 0.9) 100%),
    var(--lx-photo) center / cover no-repeat,
    #051d2a !important;
}
.page-hero.lx-hp::before { opacity: 0.35; }

/* ---------- the closing band ---------- */
.cta.lx-cta {
  background:
    linear-gradient(100deg, rgba(5, 29, 42, 0.86) 0%, rgba(5, 29, 42, 0.6) 50%, rgba(5, 29, 42, 0.22) 100%),
    url("/shots/lx/ctaponds.webp") center / cover no-repeat,
    #051d2a !important;
  border: 1px solid rgba(201, 165, 94, 0.35);
}
.cta.lx-cta::before, .cta.lx-cta::after { opacity: 0.25; }
.cta.lx-cta .te-h2 { color: #ead39c !important; }
.cta.lx-cta p { color: rgba(239, 230, 212, 0.86) !important; }

@media (prefers-reduced-motion: reduce) {
  .lx-band img { transition: none; }
  .lx-band:hover img { transform: none; }
}

@media (max-width: 760px) {
  .lx-band { aspect-ratio: 4 / 3; border-radius: 22px; margin-bottom: 40px; }
  .lx-band-col { margin-top: 26px; }
  .page-hero.lx-hp {
    background:
      linear-gradient(180deg, rgba(5, 29, 42, 0.72) 0%, rgba(5, 29, 42, 0.6) 40%, rgba(5, 29, 42, 0.94) 100%),
      var(--lx-photo-sm, var(--lx-photo)) center / cover no-repeat,
      #051d2a !important;
  }
  .cta.lx-cta {
    background:
      linear-gradient(180deg, rgba(5, 29, 42, 0.6) 0%, rgba(5, 29, 42, 0.88) 55%, rgba(5, 29, 42, 0.95) 100%),
      url("/shots/lx/ctaponds-800.webp") center top / cover no-repeat,
      #051d2a !important;
  }
}

/* no swimming fish or prawns anywhere (26 Oct 2026, the owner's call) — the
   page's own drawn ones; script.js no longer injects its swimmers either */
.sea-swim, .hv-swim, .hv-prawn, .rp-prawn { display: none !important; }

/* no water either: the rising bubbles, the hero's drifting waves and its
   dotted wave lines, and the farmer picture's splashing drops (26 Oct 2026) */
.sea-bubbles, .bubbles, .hv-sea, .hv-mind, .rp-drop { display: none !important; }

/* ---------- the phone gallery: photographs of a real phone ----------
   Each drawn screen was captured at 3x and set into a photographed phone
   (in hand, on the counter, on marble, by the ponds). The drawn phone stays
   in the markup for the page's text and translation, but is not shown. */
.lx-ph .iph { display: none !important; }
.lx-phone-shot {
  display: block; width: 100%; max-width: 270px; margin: 0 auto;
  aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: #051d2a;
  border: 1px solid rgba(201, 165, 94, 0.32);
  box-shadow: 0 30px 50px -28px rgba(6, 26, 40, 0.7);
}
.lx-phone-shot img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }

/* on a phone the twelve photographs are a swipe, not a twelve-screen scroll:
   one and a bit in view, snapping to the centre, with a gold hint of the next */
@media (max-width: 760px) {
  .iph-gallery:has(.lx-ph) {
    display: flex !important; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -22px; padding: 6px 22px 18px; scrollbar-width: none;
  }
  .iph-gallery:has(.lx-ph)::-webkit-scrollbar { display: none; }
  .iph-gallery .lx-ph { flex: 0 0 74%; scroll-snap-align: center; margin: 0; }
  .iph-gallery .lx-ph .lx-phone-shot { max-width: none; }
  .iph-gallery .lx-ph figcaption { font-size: 0.9rem; margin-top: 12px; text-align: center; }
}

/* no ripples either: the rings the leaping prawn left on the farmer's pond */
.rp-ring, .rp-ring2 { display: none !important; }

/* ---------- one day at the shop: what the app does, in the owner's day ----------
   Four moments in the order they happen, each a photograph and two lines.
   A row of four on a computer; on a phone a column joined by a gold thread. */
.day-line {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.day {
  display: flex; flex-direction: column;
  background: #fffdf9;
  border: 1px solid rgba(201, 165, 94, 0.34);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(5, 29, 42, 0.45);
}
.day-pic { display: block; aspect-ratio: 16 / 10; background: #051d2a; overflow: hidden; }
.day-pic img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.day-txt { padding: 20px 22px 24px; }
.day-time { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.day-time b {
  font-family: var(--lx-serif, inherit); font-weight: 600; font-size: 1.9rem; line-height: 1;
  color: #85652b; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
}
.day-time span {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8a7a5c;
}
.day h3 { font-family: var(--lx-serif, inherit); font-size: 1.28rem; line-height: 1.22; color: #16212c; margin: 0 0 4px; text-wrap: balance; }
.day h3 + .te-sub { margin: 0 0 10px; color: #85652b; font-weight: 600; font-size: 0.84rem; }
.day-txt > p:not(.day-time):not(.te-sub) { color: #4b5560; font-size: 0.95rem; line-height: 1.6; margin: 0; }
.day-txt > p.te-sub:last-child { margin-top: 6px; font-size: 0.82rem; color: #6b737b; }
.day-more { text-align: center; margin: 34px 0 0; }
.day-more-te { text-align: center; margin-top: 8px; }
html[lang="te"] .day-time b { font-family: "Noto Serif Telugu", var(--lx-serif, inherit); font-size: 1.35rem; }

@media (max-width: 1080px) {
  .day-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .day-line { grid-template-columns: 1fr; gap: 0; }
  .day { border-radius: 22px; }
  /* the thread between one moment and the next */
  .day + .day { margin-top: 34px; position: relative; overflow: visible; }
  .day + .day::before {
    content: ""; position: absolute; left: 50%; top: -34px; width: 1px; height: 34px;
    background: linear-gradient(180deg, transparent, rgba(201, 165, 94, 0.8));
  }
  .day + .day .day-pic { border-radius: 22px 22px 0 0; }
  .day-time b { font-size: 2.1rem; }
  .day h3 { font-size: 1.42rem; }
}
html[lang="te"] .day-time span { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }