/* ==========================================================================
   MAHARASHTRA WEDDING — the wedding venue
   --------------------------------------------------------------------------
   A blue sky with the details in it, a painted wall along the bottom, the road
   below that, and the elephant standing on the road in front of the wall.

   Measured off the supplied UI, as fractions of the section's width:

     wall           .397 tall   (wall-painted.png is 1440 x 572 — its own aspect)
     road           .094 tall   (road-for-elephant.png, 1440 x 135)
     elephant       .447 wide   (672 x 700), standing on the road's top edge
     title  .058    name .030   label .022   phone .030   actions .026
     rule   .28

   TWO CAPS MAKE IT WORK ON A WIDE SCREEN. Left alone, a full-bleed wall at
   1920 would stand 762px tall and the section would run past 2000px. The wall
   and the road are therefore height-capped and drawn with `object-fit: cover`
   from their TOP edge — safe, because all of the wall's drawing is in its top
   14% (the battlements) and everything below is flat #ebccb5, and the road is
   flat #8e8e8e throughout. So the crop only ever removes plain colour.
   ========================================================================== */

.venue {
  /* the column the words are measured against; the sky, wall and road are
     always full-bleed */
  --vw: min(100vw, 1500px);
  --ts: 1;

  --sky: #2f6e9e;             /* sampled from blue-background.png            */
  --wall: #ebccb5;            /* the flat body of wall-painted.png           */
  --road: #8e8e8e;            /* road-for-elephant.png, flat throughout      */
  --ink: #fdf6ec;

  --wall-h: min(39.7vw, 380px);
  --road-h: min(9.4vw, 92px);

  /* The elephant's size lives here rather than on the element, because the
     column's bottom padding has to clear HIM, not just the wall — he stands on
     the road and reaches well above it, and the first version had him walking
     straight through "Get Directions". elephant.png is 672 x 700. */
  --ele-w: min(calc(var(--vw) * 0.447), 460px);
  --ele-h: calc(var(--ele-w) * 700 / 672);

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;

  padding: calc(var(--vw) * 0.085) 0
           calc(var(--road-h) + var(--ele-h) + var(--vw) * 0.045);
}

/* ---- the sky's clouds --------------------------------------------------- */

.venue__sky {
  position: absolute;
  inset: 0;
  bottom: var(--wall-h);      /* clouds belong in the sky, not on the wall */
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.venue-cloud {
  position: absolute;
  display: block;
  height: auto;
  will-change: transform;
}

/* ---- the words ---------------------------------------------------------- */

.venue__wrap {
  position: relative;
  z-index: 2;
  width: var(--vw);
  margin: 0 auto;
  text-align: center;
}

.venue__title {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--vw) * 0.058 * var(--ts));
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.venue__name {
  margin: calc(var(--vw) * 0.045) 0 0;
  font-size: calc(var(--vw) * 0.030 * var(--ts));
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.venue__rule {
  display: block;
  width: calc(var(--vw) * 0.28);
  height: auto;
  margin: calc(var(--vw) * 0.036) auto;
}

.venue__label {
  margin: 0;
  font-size: calc(var(--vw) * 0.022 * var(--ts));
  line-height: 1.4;
  opacity: 0.9;
}

.venue__phone {
  margin: calc(var(--vw) * 0.008) 0 0;
  font-size: calc(var(--vw) * 0.030 * var(--ts));
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.venue__actions {
  display: flex;
  justify-content: center;
  gap: calc(var(--vw) * 0.10);
  margin-top: calc(var(--vw) * 0.030);
  flex-wrap: wrap;
}

.venue__action {
  max-width: calc(var(--vw) * 0.22);
  color: var(--ink);
  font-size: calc(var(--vw) * 0.026 * var(--ts));
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

.venue__action:hover,
.venue__action:focus-visible {
  border-bottom-color: currentColor;
}

/* ---- the ground: wall, elephant, road ----------------------------------- */

.venue__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.venue__wall,
.venue__road {
  display: block;
  width: 100%;
  overflow: hidden;
}

.venue__wall { height: var(--wall-h); }
.venue__road { height: var(--road-h); }

.venue__wall img,
.venue__road img {
  display: block;
  width: 100%;
  height: 100%;
  /* from the TOP: the wall's battlements and the road's edge are the drawn
     parts, and everything the crop removes below them is flat colour */
  object-fit: cover;
  object-position: 50% 0%;
}

/* The elephant stands on the road's top edge, in front of the wall.

   Centred with auto margins, NOT `left: 50%; translateX(-50%)`. He is the one
   element here that GSAP moves, and GSAP owns an element's whole transform —
   given the translate it would either overwrite the centring (leaving him half
   a width to the right at rest) or fight it. Nothing may depend on a transform
   that the animation also writes to. */
.venue__elephant {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--road-h);
  width: var(--ele-w);
  height: auto;
  margin: 0 auto;
  z-index: 3;
}

/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   The supplied UI is drawn portrait, so its own fractions come out small on a
   wide screen and large on a phone. --ts steps the words back up as the column
   narrows, and below 620px the two actions stop sharing a line.
   ========================================================================== */

@media (max-width: 1100px) { .venue { --ts: 1.06; } }

@media (max-width: 860px) {
  .venue { --ts: 1.14; }
  .venue__actions { gap: calc(var(--vw) * 0.08); }
}

@media (max-width: 620px) {
  .venue {
    --ts: 1.2;
    --wall-h: 46vw;
    --road-h: 11vw;
  }

  .venue__wrap { width: calc(var(--vw) * 0.9); }
  .venue__title { font-size: calc(var(--vw) * 0.085 * var(--ts)); }
  .venue__name  { font-size: calc(var(--vw) * 0.044 * var(--ts)); }
  .venue__label { font-size: calc(var(--vw) * 0.032 * var(--ts)); }
  .venue__phone { font-size: calc(var(--vw) * 0.044 * var(--ts)); }
  .venue__rule  { width: calc(var(--vw) * 0.42); }

  .venue__action {
    max-width: none;
    font-size: calc(var(--vw) * 0.038 * var(--ts));
  }
  .venue__actions { gap: calc(var(--vw) * 0.09); }

  .venue { --ele-w: calc(var(--vw) * 0.62); }
}

@media (max-width: 420px) {
  /* the two links no longer fit side by side */
  .venue__actions { flex-direction: column; gap: calc(var(--vw) * 0.035); }
}

/* the composition stands on its own; nothing has to move */
@media (prefers-reduced-motion: reduce) {
  .venue * { animation: none !important; transition: none !important; }
}