/* ==========================================================================
   Learn with Swati — slides 35 and 36 of old.pptx

   Geometry is the source canvas's (1920x1080, 108px gutters, 1704px content),
   rebased by 1300/1704 = 0.763 like the rest of the site and expressed against
   the 1300px container. Positions are percentages of the content width,
   measured from x=108.

   Crops are NOT from the PowerPoint. The PPTX writes every picture with
   `stretch` and no `srcRect`, so both page backgrounds and the second video
   still lose their crop there. The windows below come from the Canva element
   data for pages 35-36 (design DAGWh8EbLBY), where each image fill carries an
   `imageBox` giving the image's drawn box inside its frame. Every asset is
   pre-cropped to that window, so `cover` re-crops nothing meaningful.

   Vertical rhythm is the site's, not the slide's: both slides leave a lot of
   dead canvas below their content (slide 35 stops at y=707 of 1080), so the
   sections use the same `clamp(2rem, 6vw, 4.9rem)` block padding as every
   other section on the site rather than reproducing the slide's y offsets.
   Everything *within* a section keeps the source spacing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Index — slide 35
   Source: title x=422.7 y=237.5 1074.5x101.5  85.33px Cinzel Decorative Bold,
                 centred on the canvas, line-height 1.03
           tiles 850.13x114.72, two columns at x=108 and x=999.14,
                 three rows at y=407.99 / 591.85 / 775.71,
                 fill #DDCCC2, 1px stroke #6B5E54, label 26.67px centred
   -------------------------------------------------------------------------- */

/* The slide's own background — a very faint floral on near-white, distinct
   from the body texture. Canva places it with
   imageBox=(0,-23.44 1966.89x1080) in a 1920x1080 frame, i.e. slightly wider
   than the frame and nudged left, so only x 1.19%..98.81% of the artwork is
   visible. The asset is pre-cropped to that window and flattened onto the page
   colour (it always covers), so it ships without alpha at 18KB. */
.lws-index-bleed {
  background: var(--c-bg) url('../../images/learn-with-swati-texture.jpg') center / cover no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/learn-with-swati-texture.webp') type('image/webp'),
    url('../../images/learn-with-swati-texture.jpg')  type('image/jpeg')
  ));
}

.lws-index { padding-block: clamp(2rem, 6vw, 4.9rem); }

/* 85.33px in the source. Cinzel Decorative renders lowercase as small
   capitals — that is what gives the design its large-L/small-EARN look — so
   the text stays in title case rather than being uppercased. */
.lws-index__title {
  margin: 0 0 clamp(1rem, 4.05vw, 3.29rem);      /* 69.1 -> 52.7px */
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.01vw, 4.07rem);       /* 85.33 -> 65.1px */
  font-weight: 700;
  line-height: 1.03;
  text-align: center;
  color: var(--c-ink);
}

/* Two columns 850.13 wide with a 41.01 gutter, rows 114.72 tall on a 69.14
   gutter — all as percentages of the 1704 content width. Source order is
   column-major (Nine Nights / Hastas above Diwali / Poornimas); DOM order is
   row-major so the labels also read correctly once the grid folds to one
   column. */
.lws-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The column gutter is a true percentage of the content width. The row
     gutter cannot be: a percentage `row-gap` resolves against the grid's own
     *height*, not its width, which collapsed 69.14 source px to 7px. It is
     written as the rebased length instead. */
  column-gap: 2.407%;                            /* 41.01 / 1704 */
  row-gap: clamp(0.75rem, 4.058vw, 3.30rem);     /* 69.14 -> 52.7px */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fill and stroke are the source shape's. `min-height` rather than a fixed
   aspect ratio so a label that wraps on a narrow viewport grows the tile
   instead of spilling out of it. */
.lws-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(52px, 6.73vw, 5.47rem);      /* 114.72 -> 87.5px */
  padding: 0.6em clamp(0.6rem, 2vw, 1.5rem);
  background: #ddccc2;
  border: 1px solid var(--c-ink);
  font-size: clamp(0.8rem, 1.565vw, 1.272rem);   /* 26.67 -> 20.3px */
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  transition: background-color 0.15s ease;
}

/* The source pair is reproduced faithfully: #6B5E54 on #DDCCC2 measures
   4.02:1, which fails WCAG AA for text this size (20.3px, regular weight).
   The tile is a bordered block rather than an inline link, so nothing here is
   signalled by colour alone, but the label itself is under the floor. Two
   one-line fixes, neither of which changes the design's character:
     - darken the label to #60554c  -> 4.65:1 on the same fill, or
     - lighten the fill to #e8ddd6  -> 4.69:1 with the ink unchanged.
   Flagged rather than applied because the fill is a shared design value. */
.lws-tile:hover,
.lws-tile:focus-visible { background: #d4c0b3; }

/* --------------------------------------------------------------------------
   Nine Nights, Nine Forms of Durga — slide 36
   Source: heading  x=108 y=108 1533.4x100.5  84px Cinzel, line-height 1.23
           subtitle x=108 y=199  673.6x37.6   32px Century Gothic bold
           video    x=108 559.13 wide, rows at y=302.64 and y=683.25
           copy     x=724.71 715.4 wide, rows at y=302.64 and y=683.85, 32px
           leaves   (1641.4,-139.6) 402.6x424.9 | (1238.8,-224.7) 402.6x424.9
           sprig    (1482.1,200.2)  360.6x547.1, flipped horizontally
   -------------------------------------------------------------------------- */

/* Canva places the background with imageBox=(-420,0 1920x1920) in a 1920x1080
   frame, so only y 21.9%..78.1% of the square asset shows. Pre-cropped to that
   band, which is exactly 16:9, and flattened — it always covers. */
.lws-topic-bleed {
  position: relative;
  overflow: hidden;                              /* clips the ornaments' bleed */
  background: #eadcd3 url('../../images/learn-with-swati-paper.jpg') center / cover no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/learn-with-swati-paper.webp') type('image/webp'),
    url('../../images/learn-with-swati-paper.jpg')  type('image/jpeg')
  ));
}

.lws-topic { padding-block: clamp(2rem, 6vw, 4.9rem); }

/* Decorative layer. Inset by the gutter so its width is exactly --container
   and the child percentages resolve against the 1300px content box — a plain
   `left: 0` on .page would resolve them against the padding box instead and
   put everything ~1.2% out. Zero height: the children are positioned from the
   section top and shifted by a percentage of their own height, which is how
   the source's negative y offsets are reproduced. */
.lws-orns {
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 0;
  z-index: 0;
  pointer-events: none;
}

.lws-orn { position: absolute; top: 0; }

.lws-orn img { width: 100%; }

/* Widths and offsets are percentages of the 1704 content width. Max-widths are
   the assets' native sizes, so they can never be upscaled. DOM order is the
   source's back-to-front stacking, so no z-index is needed. */
.lws-orn--leaf-b { left: 66.36%; width: 23.62%; max-width: 433px; transform: translateY(-52.88%); }
.lws-orn--sprig  { left: 80.64%; width: 21.16%; max-width: 467px; transform: translateY(36.59%); }
.lws-orn--leaf-a { left: 89.99%; width: 23.62%; max-width: 433px; transform: translateY(-32.86%); }

.lws-topic__head { position: relative; z-index: 1; }

/* 84px in the source. Cinzel, like Cinzel Decorative, sets lowercase as small
   capitals, so this is deliberately not uppercased — the initial caps are
   meant to stand taller than the rest, exactly as the slide renders. */
.lws-topic__title {
  margin: 0;
  font-family: var(--font-engraved);
  font-size: clamp(1.9rem, 4.93vw, 4.01rem);     /* 84 -> 64.1px */
  font-weight: 400;
  line-height: 1.23;
  color: var(--c-ink);
}

/* 32px bold — the same size as body copy, so it rides --step-body. The source
   sets it 9px above the heading's own line box, i.e. hard up against it. */
.lws-topic__sub {
  margin: 0 0 clamp(1.25rem, 3.45vw, 2.80rem);   /* 58.8 -> 44.9px */
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
}

/* Video still 559.13 wide, copy 715.4 wide, 57.58 apart — 32.81% / 41.98% of
   the content width with a 3.379% gutter. That leaves the right 21.8% of the
   row empty, as the source does: it is the column the leaves occupy. */
.lws-row {
  position: relative;
  z-index: 1;
  column-gap: 3.379%;                            /* 57.58 / 1704 */
  row-gap: clamp(1.5rem, 3.84vw, 3.12rem);
}

.lws-row + .lws-row { margin-top: clamp(1.5rem, 3.84vw, 3.12rem); }   /* 65.4 -> 49.9px */

.lws-video { margin: 0; }

.lws-copy {
  font-size: var(--step-body);
  line-height: 1.3;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Responsive — breakpoints match the rest of the site
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* One column. The video still leads rather than dropping below its
     description, the same exception the home page makes for the book cover. */
  .lws-row > .media-col { order: 0; }

  /* Capped well under the 759px and 802px native widths so a full-width
     column never asks the browser to upscale them. */
  .lws-video { max-width: 42rem; margin-inline: auto; }

  /* The leaves are drawn for the empty right-hand column, which no longer
     exists once the rows are full width — the two inner copies would sit
     straight over the heading. Only the corner one is kept, scaled up and
     eased back the way site.css treats .ornament-tr. */
  .lws-orn--leaf-b,
  .lws-orn--sprig { display: none; }

  .lws-orn--leaf-a { left: auto; right: -6%; width: 34%; opacity: 0.7; }
}

@media (max-width: 767px) {
  .lws-tiles { grid-template-columns: 1fr; row-gap: clamp(0.75rem, 3vw, 1.25rem); }

  .lws-orn--leaf-a { width: 44%; }
}