/* Homepage "Watch & Learn" (local-videos.js): a gold band between two maroon borders of gold
   diamonds, the heading in maroon with its Hindi line, and a row of phones: the big one in the middle
   plays, a smaller one on each side shows a still, and a mandala turns slowly behind them
   (site/local/videos.js moves them). On phones everything is smaller. */
.gw { --gw-gold: #e6b94c; --gw-maroon: #5c1020; --gw-pw: clamp(230px, 21vw, 290px);
  position: relative; overflow: hidden; padding: clamp(64px, 7vw, 92px) 0 clamp(60px, 6.5vw, 86px); color: var(--gw-maroon);
  background: radial-gradient(ellipse 60% 55% at 50% 52%, #fdedb9 0%, rgba(253, 237, 185, 0) 70%),
    linear-gradient(180deg, #f2d07a 0%, var(--gw-gold) 48%, #d6a13b 100%); }

/* the maroon borders, top and bottom: gold diamonds between two gold lines */
.gw::before, .gw::after { content: ""; position: absolute; left: 0; right: 0; height: 26px; border-block: 2px solid var(--gw-gold);
  background: var(--gw-maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22'%3E%3Cpath d='M15 4l7 7-7 7-7-7z' fill='%23e6b94c'/%3E%3Ccircle cx='0' cy='11' r='1.8' fill='%23e6b94c'/%3E%3Ccircle cx='30' cy='11' r='1.8' fill='%23e6b94c'/%3E%3C/svg%3E") center / 30px 22px repeat-x; }
.gw::before { top: 0; box-shadow: 0 4px 10px -4px rgba(62, 9, 20, .5); }
.gw::after { bottom: 0; box-shadow: 0 -4px 10px -4px rgba(62, 9, 20, .5); }

.gw-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.gw-head { position: relative; z-index: 1; margin-bottom: clamp(8px, 2vw, 18px); text-align: center; }
.gt-home .gw-head h2 { margin: 0; font: 700 clamp(30px, 3.6vw, 46px)/1.1 Georgia, "Times New Roman", serif; color: var(--gw-maroon);
  text-shadow: 0 1px 0 rgba(255, 246, 214, .6); }
.gw-head p { margin: 8px 0 0; font: 600 clamp(17px, 1.6vw, 21px)/1.4 "Noto Serif Devanagari", "Tiro Devanagari Hindi", Mangal, serif; color: #7a1f30; }
/* a small rule under the heading: two lines with a diamond between */
.gw-head::after { content: ""; display: block; width: 150px; height: 12px; margin: 12px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='12'%3E%3Cpath d='M0 6h62M88 6h62' stroke='%235c1020' stroke-width='1.5'/%3E%3Cpath d='M75 0l6 6-6 6-6-6z' fill='%235c1020'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the phones, all in one place: the middle one full size, the ones beside it smaller and pushed out */
.gw-stage { position: relative; padding: 26px 0 6px; touch-action: pan-y; }
/* (the theme makes every svg 1rem square: these set their own size) */
.gw-mandala { position: absolute; left: 50%; top: 50%; width: calc(var(--gw-pw) * 2.05); height: auto; aspect-ratio: 1; translate: -50% -50%;
  color: var(--gw-maroon); opacity: .3; pointer-events: none; animation: gw-turn 90s linear infinite; }
@keyframes gw-turn { to { rotate: 360deg; } }
.gw-phones { display: grid; justify-items: center; margin: 0; padding: 0; list-style: none; }
.gw-phone { grid-area: 1 / 1; position: relative; width: var(--gw-pw); margin: 0; padding: 11px; border-radius: 40px;
  background: linear-gradient(150deg, #7c1c31 0%, var(--gw-maroon) 50%, #3c0813 100%);
  box-shadow: 0 0 0 3px var(--gw-gold), 0 0 0 8px rgba(92, 16, 32, .28), 0 30px 50px -18px rgba(60, 8, 19, .7);
  opacity: 0; visibility: hidden; transform: scale(.5);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s, filter .6s, visibility 0s .6s; }
.gw-phone::before { content: ""; position: absolute; z-index: 2; top: 3px; left: 50%; width: 22%; height: 5px; translate: -50% 0;
  border-radius: 99px; background: #2a0510; } /* the speaker slit */
.gw-phone__screen { position: relative; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #000; }
.gw-phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gw-phone__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gw-phone__pick { position: absolute; inset: 0; z-index: 3; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; cursor: pointer; }
.gw-phone__pick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; translate: -50% -50%; border-radius: 50%;
  background: var(--gw-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%235c1020'/%3E%3C/svg%3E") center / 30px no-repeat;
  box-shadow: 0 0 0 5px rgba(230, 185, 76, .35), 0 8px 18px rgba(0, 0, 0, .35); }
.gw-phone__pick:focus-visible { outline: 3px solid var(--gw-maroon); outline-offset: 8px; }
.gw-phone.is-active { z-index: 3; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gw-phone.is-active .gw-phone__pick { display: none; }
.gw-phone.is-next, .gw-phone.is-prev { z-index: 2; opacity: 1; visibility: visible; filter: saturate(.8) brightness(.9); transition-delay: 0s; }
.gw-phone.is-next { transform: translateX(86%) scale(.74); }
.gw-phone.is-prev { transform: translateX(-86%) scale(.74); }
.gw-phone.is-next:hover, .gw-phone.is-prev:hover { filter: none; }

/* the arrows and dots under the phones */
.gw-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(22px, 3vw, 34px); }
.gw-arrow { display: grid; place-items: center; width: 48px; height: 48px; min-height: 0; padding: 0; border: 2px solid var(--gw-maroon); border-radius: 50%;
  background: var(--gw-maroon); color: var(--gw-gold); cursor: pointer; box-shadow: 0 6px 14px -6px rgba(60, 8, 19, .7); transition: background .2s, color .2s; }
.gw-arrow:hover { background: transparent; color: var(--gw-maroon); }
.gw-arrow svg { width: 22px; height: 22px; }
.gw-dots { display: flex; align-items: center; }
.gw-dot { display: grid; place-items: center; width: 24px; height: 28px; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; transition: width .3s; }
.gw-dot::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--gw-maroon); border-radius: 99px; box-sizing: border-box; transition: width .3s, background .3s; }
.gw-dot[aria-current] { width: 38px; }
.gw-dot[aria-current]::before { width: 28px; background: var(--gw-maroon); }
.gw-arrow:focus-visible, .gw-dot:focus-visible { outline: 3px solid var(--gw-maroon); outline-offset: 3px; }

/* phones: smaller, with the side phones half out of the band */
@media (max-width: 749px) {
  .gw { --gw-pw: min(58vw, 230px); }
  .gw::before, .gw::after { height: 22px; background-size: 26px 19px; }
  .gw-phone { padding: 8px; border-radius: 30px; }
  .gw-phone__screen { border-radius: 23px; }
  .gw-phone.is-next { transform: translateX(78%) scale(.7); }
  .gw-phone.is-prev { transform: translateX(-78%) scale(.7); }
  .gw-phone__pick::after { width: 46px; height: 46px; background-size: 24px; }
  .gw-arrow { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-mandala { animation: none; }
  .gw-phone, .gw-dot, .gw-dot::before { transition: none; }
}