/* ==========================================================================
   JAGRITI DHAM - BANNER for /best-old-age-home-in-kolkata/  (page 1504)
   Template: page-templates/longstay.php
   Markup:   template-parts/content-long-stay-banner.php

   WHAT THIS IS
   The banner design from /best-luxury-senior-citizen-home-kolkata/
   (css/banner2.css) ported onto the WordPress page, WITHOUT the enquiry
   form. Because nothing occupies the right-hand column any more, the
   caption is allowed the width the form used to reserve, and the scrim is
   re-balanced: the reference darkened the right edge to give the glass
   panel some ground to sit on, which here would only be a dark patch
   behind nothing.

   LOADED LAST, and only on page 1504 (see functions.php). Everything is
   scoped under .jd-banner-lux so no other slider on the site is touched -
   .slider, .item, .inner-bx and .count are all shared class names used by
   the home, about, short-stay and day-at-jagriti banners.

   THE HEIGHTS MATCH /best-luxury-senior-citizen-home-kolkata/ EXACTLY
   640 / 560 / 420 / 340 across the same four breakpoints, so the two pages
   present an identical banner. Set deliberately on request 2026-09-08,
   replacing a shorter ladder (560/480/430/380/300).

   THE SOURCE IMAGES ARE NOT ALL ONE SHAPE, AND IT MATTERS LESS THAN IT LOOKS
   Slides 1 and 4 are 1920x800 (2.4:1) hero photographs; slides 2, 3 and 5
   are the page's original 1920x600 (3.2:1) art, much shallower.

   An earlier version of this file justified the shorter ladder by claiming a
   flat 640px box would force a "1.46x upscale" on the 3.2:1 slides. THAT WAS
   WRONG, and the arithmetic is worth writing down so nobody repeats it.
   object-fit:cover scales by max(boxW/naturalW, boxH/naturalH) - it does NOT
   scale to width and then stretch to height. For a 1920-wide source on any
   viewport under 1920, boxW/naturalW is at most 1, so the scale is governed
   by boxH/naturalH = 640/600 = 1.067. A flat 6.7% upscale, at EVERY width.
   Invisible on a photograph.

   What a taller box actually costs on the 3.2:1 slides is CROP, not
   sharpness. The image renders 2048px wide and the viewport shows a window
   onto it:
       viewport 1200 -> 58.6% of the image width visible
       viewport 1280 -> 62.5%
       viewport 1400 -> 68.4%
       viewport 1600 -> 78.1%
       viewport 1920 -> 93.8%
   At the old 560px box those figures were 67.0 / 71.4 / 78.1 / 89.3 / 100.
   So the trade accepted here is roughly nine points of image width on three
   slides, in exchange for the two pages matching. The per-slide crop hooks
   below are set with the tighter window in mind.

   The 2.4:1 pair is unaffected either way - at 640px they DOWNscale (0.8x at
   1280), so they remain the sharpest slides in the set.

   FOUR TRAPS IN THE THEME CSS THIS FILE HAS TO ANSWER. All four are
   `!important` declarations, and an important declaration cannot be beaten
   by an unimportant one at any specificity - loading later buys nothing.
   Each counter-flag is marked FLAGGED BACK at the point of use.

     1. css/responsive.css:199-217  @media (max-width:480px)
          button.slick-prev.slick-arrow { left:34% !important; }
          button.slick-next.slick-arrow { right:34% !important; }
          button.slick-next, button.slick-prev {
              width:40px !important; height:40px !important;
              line-height:40px !important; }
          ...::before { top:30% !important; }
        Exactly the trap the reference page documented: Previous lands at
        34% of the viewport - about 128px in at 375px - on top of the pause
        control instead of beside the Next arrow.

     2. css/responsive.css:1011-1017  @media (768px-1024px)
          button.slick-prev.slick-arrow { right:140px !important; }
          button.slick-next.slick-arrow { right:40px  !important; }
        Both arrows pinned to the RIGHT edge, and prev to the right of next.

     3. css/responsive.css:1117-1123  @media (820px-1180px)
          same pair, right:140px / right:60px !important.

     4. css/responsive.css:148-159  @media (max-width:480px)
          .count span       { color:#000 !important; }
          .count span.slash { background:#000 !important; }
        Black numerals, which were correct against the old gold #cbb279
        caption block and are invisible against the green band this design
        puts the caption on.

   Two more that are NOT flagged, so specificity alone settles them, but
   which are easy to miss:
     - style.css:1080  .slider .item img { object-fit:contain }  ->  cover
     - css/slick.css   button.slick-arrow { bottom:0; width:80px }
                       button.slick-next.slick-arrow { background:#bf8349;
                                                       right:260px }
                       button.slick-prev.slick-arrow { right:350px;
                                                       left:auto }
       the brown plates currently sitting mid-banner.
   ========================================================================== */

.jd-banner-lux{
  /* The reference gets these from header2.css; this page has no equivalent,
     so they are declared here. Do NOT reuse the names --green, --black or
     --gold: style.css uses all three in nine places and declares none of
     them anywhere in the theme, so those rules already silently do nothing.
     A fourth undeclared token is the last thing this project needs. */
  --jd-gold:#cbb279;
  --jd-gold-lt:#e3cf9c;
  --jd-gold-dp:#7f6630;
  --jd-green-deep:#2b3f2f;

  /* The ladder now lives once in css/header-lux.css as --jd-banner-h, so
     this banner and the home page's video banner cannot drift apart. The
     literal is the fallback for the case where header-lux.css fails to
     load - without it an undefined variable would collapse the slide to
     height:auto and the whole banner with it. */
  --jd-slide-h:var(--jd-banner-h, 640px);
  /* full-bleed page, caption aligned to the 1280px content column */
  --jd-gut:max(24px, calc((100% - 1280px) / 2));
}

/* ---------- shell ---------- */
.jd-banner-lux{
  position:relative;
  background-color:#22331f;   /* letterbox ground while the image loads */
  overflow:hidden;
}
.jd-banner-lux .full-slider{ position:relative; }
.jd-banner-lux .slider .item{ position:relative; overflow:hidden; height:auto; }

/* css/slick.css:1 sets .slick-list{margin:0 -5px}. Harmless in the old boxed
   banner; now the slider is full-bleed it makes the track 10px wider than the
   viewport and pushes every slide 5px off centre. */
.jd-banner-lux .full-slider .slick-list{ margin:0; }

/* THE ONE THAT BROKE THE WHOLE BANNER, AND IT IS NOT OBVIOUS.
   css/slick.css gives .slick-track `transition: 1s`. That is the SHORTHAND,
   so transition-property resolves to `all` - including width. slick writes
   the track width inline at init (width:6925px for five 1385px slides), and
   that write gets animated rather than applied.

   Measured on a clean load, before this rule existed:
       track.getAttribute('style')  ->  "opacity: 1; width: 6925px;"
       track.offsetWidth            ->  0
       getComputedStyle(track).width->  "0px"
   and it stayed at 0 - still 0 after waiting 2.5s, so this is not simply a
   transition in flight. Re-setting the width with !important did not move it
   either; only removing the transition did, at which point the track jumped
   to 6925px and the banner height fell from 2800px to 560px.

   With a 0-wide track the five floated 1385px slides cannot sit on one line,
   so every slide dropped onto its own - the banner rendered 2800px tall with
   all five stacked down the page and the caption of slide 3 sitting 1400px
   below the fold.

   Removing the transition costs nothing here. In fade mode slick never
   translates the track; the cross-fade is a per-slide `transition: opacity
   1200ms` written inline on each .slick-slide, which this does not touch.
   Scoped to .jd-banner-lux, so every other slider on the site keeps the
   theme behaviour. js/banner-lux.js also calls slickSetPosition once the
   lazy-loaded slide images have landed, which covers the same ground from
   the other side. */
.jd-banner-lux .slick-track{ transition:none; }

/* Before slick initialises, all five .item divs paint stacked in a tall
   column. Clip to one slide height so there is no flash of it. */
.jd-banner-lux .slider:not(.slick-initialized){
  height:var(--jd-slide-h);
  overflow:hidden;
}

/* ---------- the slides ---------- */
/* beats style.css:1080 `.slider .item img{height:100%;object-fit:contain}`
   on specificity (0-3-1 against 0-2-1) */
.jd-banner-lux .slider .item img{
  width:100%;
  height:var(--jd-slide-h);
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Per-slide crop hooks. First value is horizontal, second vertical; 50% 50%
   is dead centre. Use these classes and NOT :nth-child - slick clones slides
   when infinite:true and the clones break nth-child.

   WHICH VALUE IS ACTUALLY DOING ANYTHING DEPENDS ON THE VIEWPORT. The box is
   100vw x --jd-slide-h and the source is 3.2:1, so above about 1790px the box
   is WIDER than 3.2:1 and the crop is vertical (second value matters); below
   that it is narrower and the crop is horizontal (first value). On a phone the
   box is roughly 1.25:1, which shows only ~39% of the image width.

   Each value below was set by looking at the photograph. */
.jd-banner-lux .slider .jd-s1 img{ object-position:58% 42%; }   /* she is right of centre, her face in the upper half */
.jd-banner-lux .slider .jd-s2 img{ object-position:55% 55%; }   /* bed and balcony are right and low */
.jd-banner-lux .slider .jd-s3 img{ object-position:62% 48%; }   /* doctor, nurse and resident are right of centre */
.jd-banner-lux .slider .jd-s4 img{ object-position:50% 40%; }   /* centred: 60% trimmed the near player at desktop widths */
.jd-banner-lux .slider .jd-s5 img{ object-position:50% 62%; }   /* gate is low, top third is sky */

/* Scrim. The reference weighted the right edge too, to seat the glass form
   panel. With no panel here that would just be a dark smudge behind nothing,
   so the horizontal ramp runs dark-to-clear left to right and the vertical
   one carries the caption. */
.jd-banner-lux .slider .item::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(90deg,
      rgba(18,30,21,.84) 0%,
      rgba(18,30,21,.62) 34%,
      rgba(18,30,21,.24) 64%,
      rgba(18,30,21,.10) 100%),
    linear-gradient(0deg, rgba(18,30,21,.62) 0%, rgba(18,30,21,0) 46%);
}
/* .inner-bx is absolutely positioned against .item, so the Bootstrap
   .container between them must not create a containing block */
.jd-banner-lux .slider .item > .container{ position:static; }

/* ---------- caption ---------- */
/* beats style.css:1022 and :1087 (`.slider .inner-bx`, width:44% then 59%,
   flat rgba(0,0,0,.5) box) - 0-3-0 against 0-2-0 */
.jd-banner-lux .slider .inner-bx{
  position:absolute; z-index:3;
  bottom:104px;
  left:var(--jd-gut);
  /* the form used to occupy this column; the caption now takes it, capped so
     the line length stays readable rather than running the full 1280px */
  right:var(--jd-gut);
  width:auto; max-width:720px;
  background:none;
  padding:0 0 0 22px;
  border-left:2px solid var(--jd-gold);
  transition:none;
  height:auto;
  text-align:left;
}

/* The reference caption leads with a <span class="cap-eyebrow">. Here the
   slide title is already an <h4> carrying real content, so the h4 takes the
   eyebrow treatment rather than adding a second element.
   Beats style.css:1031 (`.slider .inner-bx h4` - gold #cbb279, 18px/23px,
   display:inline-block) and, at =<480px, css/responsive.css:177 which sets
   it black and centred. */
.jd-banner-lux .slider .inner-bx h4,
.jd-banner-lux .cap-eyebrow{
  display:block; width:auto;
  font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  line-height:1.4;
  color:var(--jd-gold-lt);      /* 7.9:1 over the scrim at its lightest */
  margin:0 0 10px;
  text-align:left;
}
/* style.css:1040 sets `.slider .inner-bx h4 strong{display:block}`, which
   breaks "Long Stay at / Jagriti Dham" across two lines mid-phrase. */
.jd-banner-lux .slider .inner-bx h4 strong{
  display:inline; font-weight:700;
}

/* beats style.css:1044 (inline-block, 15px, padding-left:20px, width:72%) */
.jd-banner-lux .slider .inner-bx p{
  display:block; width:100%; margin:0; padding:0;
  color:#fff; font-size:18px; line-height:1.55;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

/* ---------- slide counter ---------- */
/* beats style.css:1054 (`.count{display:inline-block;float:right}`) */
.jd-banner-lux .count{
  float:none; display:flex; align-items:baseline; gap:6px;
  margin-top:20px;
  text-align:left;
}
.jd-banner-lux .count span{
  display:inline-block; line-height:1;
  font-family:inherit;
}
.jd-banner-lux .count .slidenum{ font-size:26px; font-weight:600; color:#fff; }

/* THE SLASH IS A REAL GLYPH, NOT A ROTATED BOX.
   Two things matter here and the first one has bitten before.

   (1) SPECIFICITY. This must be `.count span.slash`, NOT `.count .slash`.
   style.css:1068 is `.count span.slash` = 0-2-1. A class-only selector is
   0-2-0 and LOSES however many stylesheets later this file loads. Scoping
   under .jd-banner-lux makes it 0-3-1, which wins outright.

   (2) THE OBJECT ITSELF. The legacy slash is a 1px x 40px rectangle at
   rotate(60deg). A rotated box keeps its ORIGINAL width for layout - 1px -
   while PAINTING across its full bounding box, so the flex gap measures 1px
   while the eye sees ~35px, and the bar crosses into the total. A typed "/"
   occupies exactly the space it draws, carries its own sidebearings, sits on
   the shared baseline and scales with the type. Every legacy declaration is
   therefore neutralised rather than nudged. */
.jd-banner-lux .count span.slash{
  width:auto; height:auto;
  margin:0; left:0; top:auto; position:static;
  background:none;
  transform:none;
  line-height:1;
  flex:0 0 auto;
  font-size:19px;
  font-weight:400;
  color:rgba(227,207,156,.72);
}
.jd-banner-lux .count span.slash::before{ content:"/"; }
.jd-banner-lux .count .totalnum{
  font-size:15px; color:var(--jd-gold-lt); opacity:.85;
}

/* A ONE-SLIDE BANNER HAS NO SLIDER FURNITURE.
   /senior-citizen-apartments/ (page 1051) draws its slides from an ACF
   repeater that currently holds a single row. slick still initialises on one
   slide and still renders its prev/next buttons, and js/banner-lux.js still
   appends its pause control - all three would be controls that visibly do
   nothing. The template puts `jd-single` on the wrapper whenever the repeater
   has fewer than two rows, and this removes them.

   !important because css/slick.css sets `button.slick-arrow{display:block}`
   and slick writes inline styles onto the arrows; display is the one property
   here that has to win outright.

   Add a second row in ACF and the class disappears on its own - nothing in
   this file or in the template needs changing to get the controls back. */
.jd-banner-lux.jd-single button.slick-arrow,
.jd-banner-lux.jd-single .jd-slide-pause{ display:none !important; }

/* ---------- arrows ---------- */
/* css/slick.css gives these an 80px-wide #bf8349 plate at bottom:0, pinned
   with right:260px / right:350px, so "previous" sits to the RIGHT of "next"
   in the middle of the banner. All of it is replaced. */
.jd-banner-lux button.slick-arrow{
  position:absolute; top:auto; bottom:34px; z-index:6;
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(227,207,156,.65);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
  /* css/slick.css carries the vendor default `.slick-prev,.slick-next{
     width:20px; height:20px; margin-top:-10px}` - the negative margin is how
     slick optically centres a 20px arrow that it has pinned at top:50%. That
     centring is replaced here, but the margin survived, so the two arrows sat
     exactly 10px higher than the pause plate they share a row with (measured
     at 375px: arrows y=298, pause y=308, both computing top:238px). */
  margin:0;
}
/* FLAGGED BACK - traps 2 and 3. css/responsive.css:1011 and :1117 pin both
   arrows to the right edge with !important between 768-1024px and
   820-1180px, which is most tablets in either orientation. */
.jd-banner-lux button.slick-prev.slick-arrow{
  left:var(--jd-gut) !important; right:auto !important;
}
.jd-banner-lux button.slick-next.slick-arrow{
  left:calc(var(--jd-gut) + 62px) !important; right:auto !important;
}
.jd-banner-lux button.slick-arrow:hover{
  background:var(--jd-gold); border-color:var(--jd-gold); transform:translateY(-2px);
}
.jd-banner-lux button.slick-arrow::before{
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%);
  background-repeat:no-repeat; background-position:center;
  opacity:1;
}
.jd-banner-lux button.slick-arrow:focus-visible{
  outline:2px solid var(--jd-gold-lt); outline-offset:3px;
}

/* ---------- pause / play (injected by js/banner-lux.js) ----------
   The theme autoplays this slider at 5s a slide. WCAG 2.2.2 requires a way
   to stop content that moves automatically for more than five seconds, and
   pause-on-hover does not exist on a touch screen. */
.jd-banner-lux .jd-slide-pause{
  position:absolute; top:auto; bottom:34px; z-index:6;
  left:calc(var(--jd-gut) + 124px);
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(227,207,156,.65);
  padding:0; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.jd-banner-lux .jd-slide-pause:hover{
  background:var(--jd-gold); border-color:var(--jd-gold); transform:translateY(-2px);
}
.jd-banner-lux .jd-slide-pause:focus-visible{
  outline:2px solid var(--jd-gold-lt); outline-offset:3px;
}
/* two bars = playing (press to pause) */
.jd-banner-lux .jd-slide-pause::before,
.jd-banner-lux .jd-slide-pause::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:15px; background:#f2e8d2;
}
.jd-banner-lux .jd-slide-pause::before{ left:19px; }
.jd-banner-lux .jd-slide-pause::after{ left:27px; }
.jd-banner-lux .jd-slide-pause:hover::before,
.jd-banner-lux .jd-slide-pause:hover::after{ background:#22331f; }
/* triangle = paused (press to play) */
.jd-banner-lux .jd-slide-pause.is-paused::before{
  left:20px; width:0; height:0; background:transparent;
  border-left:13px solid #f2e8d2;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.jd-banner-lux .jd-slide-pause.is-paused::after{ display:none; }
.jd-banner-lux .jd-slide-pause.is-paused:hover::before{ border-left-color:#22331f; }

/* ==========================================================================
   Responsive
   The four --jd-slide-h steps are copied from the luxury page's
   css/banner2.css so both banners are the same height at every width:
       >=1200  640      992-1199  560      768-991  420      <=767  340
   Note there is deliberately NO height change in the 1399 block - the
   luxury page changes only its form-panel width there, and matching that
   is the point. Only the caption sizing steps at 1399 here.
   ========================================================================== */
@media (max-width:1399px){
  .jd-banner-lux .slider .inner-bx{ max-width:640px; bottom:96px; }
}

@media (max-width:1199px){
  .jd-banner-lux{ --jd-slide-h:var(--jd-banner-h, 560px); }
  .jd-banner-lux .slider .inner-bx p{ font-size:17px; }
}

@media (max-width:991px){
  .jd-banner-lux{ --jd-slide-h:var(--jd-banner-h, 420px); }
  .jd-banner-lux .slider .inner-bx{ max-width:560px; bottom:92px; }
  .jd-banner-lux .slider .inner-bx p{ font-size:16px; }
}

@media (max-width:767px){
  .jd-banner-lux{ --jd-slide-h:var(--jd-banner-h, 340px); }

  /* On a phone the caption comes off the photograph and sits on a solid
     green band beneath it. Ninety words of white text over an image is not
     readable at this size, and the reference page does the same. */
  .jd-banner-lux .slider .inner-bx{
    position:static; width:auto; bottom:auto; left:auto; right:auto;
    max-width:none;
    background:none; border-left:0;
    padding:16px 18px 18px;
  }
  /* The scrim is `inset:0` at desktop, which is right while the caption sits
     ON the photograph. Once the caption drops onto its own band the scrim
     would keep running over it, and because the mobile ramp is darkest at the
     BOTTOM it tinted the lower half of the band - leaving a visible seam
     where the band met the leftover banner ground below it, two greens that
     are the same colour but not the same after a .65 overlay. Clamp it to the
     photograph's own height. */
  .jd-banner-lux .slider .item::after{
    bottom:auto; height:var(--jd-slide-h);
    background:linear-gradient(0deg, rgba(18,30,21,.65) 0%, rgba(18,30,21,0) 55%);
  }
  .jd-banner-lux .slider .item > .container{
    padding:0;
    background:#2f4433;
  }
  /* THE BANNER GROUND MATCHES THE CAPTION BAND FROM HERE DOWN.
     With the caption in flow, each slide is as tall as its own paragraph, and
     the five paragraphs are not the same length. Measured at 375px:
         slide 1  509px    slide 2  462px    slide 3  509px
         slide 4  532px    slide 5  462px
     slick sizes the track to the TALLEST (532px) and holds it there, which is
     what stops the page jumping as slides change - but it also means a short
     slide leaves up to 70px of bare banner below its caption band. Against
     the desktop ground (#22331f) that read as a dark stripe under the green.
     Painting the banner in the band's own colour makes the leftover simply
     part of the band. */
  .jd-banner-lux{ background-color:#2f4433; }
  .jd-banner-lux .slider .inner-bx p{
    font-size:15.5px; line-height:1.5; text-shadow:none;
  }
  .jd-banner-lux .slider .inner-bx h4,
  .jd-banner-lux .cap-eyebrow{
    font-size:11px; letter-spacing:.18em; margin-bottom:7px;
  }
  .jd-banner-lux .count{ margin-top:14px; }
  .jd-banner-lux .count .slidenum{ font-size:22px; }

  /* the controls stay on the photograph, above the caption band */
  .jd-banner-lux button.slick-arrow,
  .jd-banner-lux .jd-slide-pause{
    bottom:auto; top:calc(var(--jd-slide-h) - 62px);
  }
}

/* FLAGGED BACK - traps 1 and 4, both inside @media (max-width:480px).
   Kept in their own block at the foot of the file, matching the theme's own
   breakpoint exactly, so the counter-flags are visible as a set rather than
   scattered. Without these: Previous lands at 34% of the viewport (about
   128px at 375px) directly on top of the pause plate, at 40x40 instead of
   44x44; and the counter renders black on the dark green caption band. */
@media (max-width:480px){
  .jd-banner-lux button.slick-arrow{
    width:44px !important; height:44px !important; line-height:0 !important;
  }
  .jd-banner-lux button.slick-prev.slick-arrow{
    left:14px !important; right:auto !important; bottom:auto;
  }
  .jd-banner-lux button.slick-next.slick-arrow{
    left:66px !important; right:auto !important; bottom:auto;
  }
  .jd-banner-lux button.slick-arrow::before{ top:50% !important; }
  /* the pause plate matches the arrows at 44px here, so the three read as one
     row of controls; the bar and triangle offsets are re-centred to suit */
  .jd-banner-lux .jd-slide-pause{ left:118px; width:44px; height:44px; }
  .jd-banner-lux .jd-slide-pause::before{ left:16px; }
  .jd-banner-lux .jd-slide-pause::after{ left:24px; }
  .jd-banner-lux .jd-slide-pause.is-paused::before{ left:16px; }

  .jd-banner-lux .count span{ color:#fff !important; }
  .jd-banner-lux .count .totalnum{ color:var(--jd-gold-lt) !important; }
  .jd-banner-lux .count span.slash{
    background:none !important; color:rgba(227,207,156,.72) !important;
  }
  /* css/responsive.css:140 sets `.slider .item img{height:210px}` here */
  .jd-banner-lux .slider .item img{ height:var(--jd-slide-h); }
}

/* ---------- motion ---------- */
/* 6s, so the drift completes inside the theme's 5s dwell plus the 1.2s fade
   rather than being cut off mid-move. */
@media (prefers-reduced-motion: no-preference){
  .jd-banner-lux .slider .slick-current img{ animation:jd-ken 6s ease-out both; }
  @keyframes jd-ken{ from{ transform:scale(1.055); } to{ transform:scale(1); } }
}

/* ==========================================================================
   TWO SLIDE IMAGES WERE REPLACED ON 2026-09-08
   ==========================================================================
   Slides 1 and 4 originally used art that could not survive being cropped
   into a full-bleed banner. Recorded here because the old files are still in
   images/ and somebody will otherwise put them back.

   SLIDE 1 was images/long-stay-banner2.webp - a studio composite, not a
   photograph: cut-out figures on blue sky and green lawn, with a couple and
   wheelchair at the FAR LEFT and three men walking at the FAR RIGHT and
   nothing in between. Subjects at opposite edges means every horizontal crop
   loses one or both; no object-position holds them together. On a 375px
   phone the frame showed about 39% of the image width - the empty middle,
   sky and grass, no people at all - and the caption landed directly on the
   wheelchair couple.
   NOW images/serene_tranquil_setting_slider.webp - a resident at a flowering
   trellis, subject right of centre with soft out-of-focus lawn filling the
   left third, which is exactly where the caption sits. Composed for this.

   SLIDE 4 was images/long-stay-banner5.webp - a seven-cell contact sheet of
   the amenities. Cropping sliced cells in half, the scrim read as a printing
   fault, and the caption covered two cells. A collage cannot work as a
   full-bleed frame at any size.
   NOW images/world_class_amenities_slider.webp - two residents at the
   billiards table, which is one amenity shown properly instead of seven
   shown badly, and it matches the caption it carries.

   Both replacements were already in the theme's images/ folder at 1920x800
   and were referenced by no template and no page - unused hero art shot for
   exactly this job. Slides 2, 3 and 5 are unchanged.
   ========================================================================== */

/* ==========================================================================
   THE ABOUT PAGE'S CAPTION            .jd-banner-about  (page 1051)
   ==========================================================================
   Scoped to this page ONLY. /best-old-age-home-in-kolkata/ keeps the eyebrow
   treatment above and is not touched by anything in this block.

   WHY THIS PAGE NEEDS DIFFERENT RULES

   The base caption turns the slide's <h4> into a 12px tracked-caps eyebrow,
   and on page 1504 that is right: its headings are labels - "Long Stay at
   Jagriti Dham", "Senior Comfort Suites" - and the descriptive <p> underneath
   carries the message.

   This page's heading is not a label. It is "Relax and Rejuvenate", a two-word
   line that IS the message, and setting it at 12px reduces the best writing on
   the page to a caption for its own subtitle. So here the two swap roles: the
   h4 becomes the display line and the paragraph supports it.

   The face is Fraunces, already loaded sitewide as jd-header-fonts and already
   the display face of every section heading, the front page's .about h1 and
   the footer's property name. The <strong> is picked out in brass italic -
   the same move home-lux.css:69 makes on `.about h1 strong`.

   CONTRAST, computed against the worst case rather than the likely one. The
   caption sits at the left edge, where the horizontal ramp is at its darkest
   (.84), but the ramp is over a PHOTOGRAPH, so the honest worst case is that
   alpha over a pure white pixel = #38423a:

       white     10.45:1     #e3cf9c  6.81:1      horizontal ramp only
       white     14.56:1     #e3cf9c  9.48:1      where the bottom ramp adds
       white     10.52:1     #e3cf9c  6.85:1      on the #2f4433 mobile band

   Large text needs 3:1 and normal text 4.5:1, so every one of these clears
   with room even before the text-shadow. The shadow is there for the shapes
   in the photograph, not for the arithmetic.

   Specificity: .jd-banner-lux.jd-banner-about ... is (0,4,1) against the base
   rules' (0,3,1), so this block wins wherever it lands in the file and does
   not depend on being last - including against the <=767px overrides above.
   -------------------------------------------------------------------------- */
.jd-banner-lux.jd-banner-about .slider .inner-bx h4{
  font-family:var(--jd-f-serif, "Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif);
  font-optical-sizing:auto;
  font-size:clamp(30px, 3.2vw, 46px);
  font-weight:600;
  font-style:normal;
  letter-spacing:.005em;      /* the base sets .22em for tracked caps */
  text-transform:none;        /* the base uppercases it */
  line-height:1.12;
  color:#fff;
  margin:0 0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
/* Fraunces is loaded with a real italic axis at 500 and 600 (see the
   jd-header-fonts enqueue), so this is a true italic and not a slant. */
.jd-banner-lux.jd-banner-about .slider .inner-bx h4 strong{
  display:inline;
  font-weight:600;
  font-style:italic;
  color:var(--jd-gold-lt);
}
/* The paragraph is now the supporting line, so it gets a measure. 46ch keeps
   it near the 60-75 characters that read comfortably at this size without
   running the caption's full 720px. */
.jd-banner-lux.jd-banner-about .slider .inner-bx p{
  max-width:46ch;
}

@media (max-width:991px){
  .jd-banner-lux.jd-banner-about .slider .inner-bx h4{
    font-size:clamp(28px, 4.4vw, 38px);
    margin-bottom:12px;
  }
}
@media (max-width:767px){
  /* On the solid #2f4433 band the shadow has nothing to do - there is no
     photograph behind the text any more - and it only muddies the serif. */
  .jd-banner-lux.jd-banner-about .slider .inner-bx h4{
    font-size:clamp(24px, 6.2vw, 31px);
    letter-spacing:.005em;
    margin-bottom:10px;
    text-shadow:none;
  }
  .jd-banner-lux.jd-banner-about .slider .inner-bx p{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  /* the caption's entrance is animate.css's fadeInUp via `animatable
     fadeInUp` on .inner-bx; the base file does not cancel it for this page */
  .jd-banner-lux.jd-banner-about .slider .inner-bx{ animation:none !important; }
}


/* ==========================================================================
   THE STAYCATION PAGE'S CAPTION      .jd-banner-stay  (page 1511)
   ==========================================================================
   Scoped to this page ONLY. /best-old-age-home-in-kolkata/ and
   /day-at-jagriti-dham-old-age-home/ keep the eyebrow treatment above.

   WHY THIS PAGE NEEDS DIFFERENT RULES

   Every other page on this component gives each slide a short <h4> label and a
   descriptive <p> underneath, so the h4 correctly takes the 12px
   tracked-uppercase eyebrow treatment and the <p> carries the message.

   This page has NO <p> at all. Its h4 is the message - up to forty words of it
   - so the eyebrow treatment would set a whole paragraph as 12px tracked
   capitals, which is unreadable at any size and absurd at this length. Here
   the h4 simply takes the paragraph treatment instead: same face, same size,
   same colour and same shadow as `.jd-banner-lux .slider .inner-bx p` above,
   with the tracking and the uppercase undone.

   Specificity: .jd-banner-lux.jd-banner-stay ... is (0,5,1) against the base
   eyebrow rule's (0,3,1), so this wins wherever it lands in the file and does
   not depend on being last - including against the responsive blocks above.

   Contrast is unchanged from the paragraph rule it copies: #ffffff over the
   scrim, which at its lightest possible point (the .84 ramp over a pure white
   photograph pixel, #38423a) is 10.45:1 against the 4.5:1 normal text needs. */
.jd-banner-lux.jd-banner-stay .slider .inner-bx h4{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:normal;      /* the eyebrow rule sets .22em */
  text-transform:none;        /* the eyebrow rule uppercases it */
  color:#fff;                 /* the eyebrow rule sets var(--jd-gold-lt) */
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
/* style.css:1040 sets `.slider .inner-bx h4 strong{display:block}`. There is no
   <strong> in this page's copy today, but an editor pasting one would otherwise
   break the sentence across two lines mid-phrase. */
.jd-banner-lux.jd-banner-stay .slider .inner-bx h4 strong{
  display:inline;
  font-weight:600;
}
/* the same steps the paragraph takes at these widths, so the two pages stay in
   proportion with each other */
@media (max-width:991px){
  .jd-banner-lux.jd-banner-stay .slider .inner-bx h4{ font-size:16px; }
}
@media (max-width:767px){
  .jd-banner-lux.jd-banner-stay .slider .inner-bx h4{
    font-size:15.5px;
    line-height:1.5;
    text-shadow:none;         /* the caption is on a solid band here, not the photo */
  }
}


/* ==========================================================================
   THE JIVA AYURVEDA BANNER      .jd-banner-jiva  (page 1499)
   ==========================================================================
   Scoped to this page ONLY.

   THIS BANNER IS ON THE SHARED LADDER AND IT CROPS. That is a decision, not an
   oversight, and it was the client's.

   The five files on this page are not photographs - they are designed graphics
   with headline typography baked into the pixels, on a 1920 x 610 canvas at
   3.15:1. The band is 1.98:1 at a 1280px viewport, so object-fit:cover scales
   the art to 2014 x 640 and loses 749px, 37.2% of its width.

   Two alternatives were built and rejected:
     - height taken from the artwork (aspect-ratio 1920/610), which is 402px at
       1280 and left this banner visibly shorter than the other four;
     - object-fit:contain at the full 640px with the surround filled by a
       darkened, cover-scaled copy of the same artwork, which read badly.

   So it crops. If the crop ever becomes the bigger problem, the honest fix is
   NEW ARTWORK drawn on a 2:1 canvas - not another CSS trick. Nothing in this
   block needs changing for that; a 2:1 file simply stops being cropped.

   Everything below is only about the fact that this page HAS NO CAPTION COPY.
   Specificity: .jd-banner-lux.jd-banner-jiva ... is (0,5,x) against the base
   rules' (0,3,x), so it wins wherever it lands, including against the
   responsive blocks above. */

/* The base scrim is a heavy dark-to-clear ramp running left to right at .84
   alpha, and it exists to carry white caption text over a photograph. There is
   no caption here, so over somebody's finished design it would only be a
   shadow across half the frame. What remains is a short ramp along the bottom
   22%, because slick's arrows and the pause control sit on that edge drawn in
   rgba(255,255,255,.10) over a rgba(227,207,156,.65) hairline, and they vanish
   against pale artwork. */
.jd-banner-lux.jd-banner-jiva .slider .item::after{
  background:linear-gradient(0deg, rgba(18,30,21,.55) 0%, rgba(18,30,21,0) 22%);
}

/* Under 768px the base file lifts the caption off the photograph onto a solid
   green band. With no caption that would draw a band across the page to hold
   nothing. */
@media (max-width:767.98px){
  .jd-banner-lux.jd-banner-jiva .slider .item > .container{
    background:none;
    padding:0;
  }
  .jd-banner-lux.jd-banner-jiva{
    background-color:#22331f;   /* the base file paints #2f4433 for the band */
  }
  .jd-banner-lux.jd-banner-jiva .slider .item::after{
    bottom:0;
    height:auto;
    background:linear-gradient(0deg, rgba(18,30,21,.55) 0%, rgba(18,30,21,0) 22%);
  }
}


/* ==========================================================================
   THE STRIP UNDER THE BANNER      .stay_banner_strip
   ==========================================================================
   Two pages carry it and both already load this file:
     longstay.php     (1504)  "LONG STAY" + a 110-word paragraph
     newshortstay.php (1511)  a short paragraph + a .whatsapp_block

   It lives here rather than in a file of its own because it is the banner's
   immediate continuation - it is the band the banner lands on - and both
   pages that have it already load banner-lux.css. On 1051, 1499 and 1501,
   which have no strip, none of these selectors match anything.

   WHAT WAS WRONG

   1. `background-color:#ece3ce` - a sand that belongs to no other part of the
      rebuilt site, sitting directly under a dark photographic banner.
   2. `padding:18px 0` - 18px of air under a 640px banner, so the strip reads
      as a caption stuck to the bottom of the picture rather than as the page
      beginning.
   3. THE PARAGRAPH IS CENTRED AND 110 WORDS LONG on longstay.php. Centred
      text is for a line or two; at this length every line starts in a
      different place and the eye loses the return. It also runs the full
      1280px container, which is roughly 150 characters a line.
   4. The h2 took whatever the theme gave it - Helvetica - while every rebuilt
      section on the site sets its heading in Fraunces.
   ========================================================================== */
.stay_banner_strip{
  /* the eldercare cream and the same paper grain the about page, the day-at
     section and #eldercare_living use, so the four read as one material.
     After a dark banner it also gives the page somewhere to breathe. */
  background-color:#faf7ef;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  border-bottom:1px solid rgba(203,178,121,.55);
  padding:38px 0 42px;
}

/* The house centred head: the 46px brass rule, then Fraunces.
   text-transform is left alone deliberately - one page types "LONG STAY" in
   capitals and the other types "Staycation at Jagriti Dham, Kolkata" in
   sentence case, and both are the editor's call, not this file's. */
.stay_banner_strip h2{
  font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-optical-sizing:auto;
  font-size:clamp(26px, 2.8vw, 36px);
  font-weight:600;
  line-height:1.16;
  letter-spacing:.01em;
  color:#2b3f2f;              /* 10.58:1 on the band */
  margin:0 0 16px;
}
.stay_banner_strip h2::before{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin:0 auto 18px;
  background:linear-gradient(90deg, rgba(203,178,121,0) 0%, #cbb279 50%, rgba(203,178,121,0) 100%);
}

/* THE PARAGRAPH STOPS BEING CENTRED.
   Bootstrap's .text-center sits on the ancestor column and carries !important,
   but that only makes it win as an INHERITED value - a declaration on the
   element itself beats inheritance without needing a flag of its own. So this
   is (0,2,1) and unflagged, and it wins.
   The measure is capped at 74ch, which is the top of the comfortable range and
   the right end of it for a paragraph this long; on 1511 the copy is one
   sentence and the cap never engages. */
.stay_banner_strip p{
  max-width:74ch;
  margin:0 auto;
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.75;
  color:#3a4238;              /* 9.73:1 on the band */
  text-align:justify;
  hyphens:auto;
}
/* A single short line reads worse justified than centred - the last line is
   the only line, so justification has nothing to do and the rag it would fix
   does not exist.
   The two pages are told apart by STRUCTURE, not by measuring the text, which
   CSS cannot do: newshortstay.php is the one whose column also holds a
   .whatsapp_block, and it is the one with the one-sentence paragraph.
   :only-child was the obvious guard and it is wrong here - that column holds
   an h2, the p and the .whatsapp_block, so the p is never an only child. */
.stay_banner_strip [class*="col-"]:has(.whatsapp_block) p{
  max-width:60ch;
  text-align:center;
  hyphens:none;
}

/* The two contact links on newshortstay.php. style.css:3384 sets them 24px
   #151515 with a #2d8734 icon - a green that appears nowhere else - and gives
   them no target size at all. They become the same object the footer uses: a
   round brass-outlined chip beside the number, on a 44px row. */
.stay_banner_strip .whatsapp_block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 26px;
  margin-top:22px;
  font-size:inherit;
  color:inherit;
}
.stay_banner_strip .whatsapp_block a{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-height:44px;            /* SC 2.5.5; it had none */
  margin:0;
  padding:4px 2px;
  font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:lining-nums tabular-nums;
  font-size:17px;
  font-weight:600;
  line-height:1;
  color:#2b3f2f;              /* 10.58:1 on the band; was #151515 */
  text-decoration:none;
  transition:color .25s cubic-bezier(.2,.7,.2,1);
}
.stay_banner_strip .whatsapp_block a:hover{
  color:#6b5426;              /* 6.71:1 */
  text-decoration:underline;
  text-underline-offset:3px;
}
.stay_banner_strip .whatsapp_block a:focus-visible{
  outline:2px solid #6b5426;
  outline-offset:3px;
}
/* the chip. `i` is styled rather than a wrapper because the markup has none,
   and the inline `style="color:#4f6f52;font-size:20px"` on the second icon is
   why the colour and size here carry a flag - an inline style cannot be beaten
   any other way. */
.stay_banner_strip .whatsapp_block a i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:1px solid #cbb279;   /* 3.03:1 on the band, above the 3:1 a boundary needs */
  border-radius:50%;
  font-size:16px !important;
  color:#6b5426 !important;   /* 6.71:1 on the band; was #2d8734 and #4f6f52 */
  transition:background-color .25s cubic-bezier(.2,.7,.2,1);
}
.stay_banner_strip .whatsapp_block a:hover i{
  background-color:rgba(203,178,121,.16);
}

@media (min-width:768px){
  .stay_banner_strip{ padding:52px 0 56px; }
  .stay_banner_strip h2{ margin-bottom:18px; }

  /* MATCH THE SECTION BELOW.
     #pricing puts its text in a col-md-8/col-lg-8, whose content box measures
     789px against this strip's paragraph at 747px - close enough that the two
     edges did not line up but near enough to look like a mistake rather than a
     decision. The paragraph is widened to sit on exactly that column's width.

     Expressed as a calc rather than a number so it tracks the container at
     every breakpoint instead of matching only at 1280px. The paragraph's own
     containing block is the col-12's content box, which is the container less
     one 24px Bootstrap gutter - so adding that gutter back recovers the
     container width, two thirds of it is the col-8 outer width, and removing
     the gutter again gives that column's CONTENT box. Measured at a 1220px
     container: (1196 + 24) x 2/3 - 24 = 789.33px, which is the number above.

     If --bs-gutter-x is ever changed from its 1.5rem default, the two 24px
     terms here have to change with it. Nothing else in this file depends on
     the gutter. */
  .stay_banner_strip [class*="col-"]:not(:has(.whatsapp_block)) p{
    max-width:calc((100% + 24px) * 2 / 3 - 24px);
  }
}

/* AND THE LEFT EDGES LINE UP.
   The paragraph was centred in a full-width column while the section below is
   left-aligned in the same container - the same width, but starting 200px
   apart at 1280px. Both columns carry the same 24px Bootstrap gutter, so
   simply dropping the auto centring puts the paragraph's left edge exactly on
   the pricing column's.

   The HEADING and its ornament go with it. A centred heading over a
   left-aligned paragraph of this width reads as a mistake, and left-aligning
   the whole head gives the page one continuous left edge: the banner caption
   sits on the gutter, then this, then the pricing column.

   Bootstrap's .text-center is on the ancestor column and carries !important,
   but that only makes it win as an INHERITED value - a declaration on the
   element itself beats inheritance without a flag. Which is why these are
   unflagged and still win.

   The staycation strip is untouched: its copy is one short sentence with two
   contact links under it, and that belongs centred. The :has() guard is the
   same one that already tells the two pages apart. */
.stay_banner_strip [class*="col-"]:not(:has(.whatsapp_block)) h2{
  text-align:left;
}
.stay_banner_strip [class*="col-"]:not(:has(.whatsapp_block)) h2::before{
  margin-left:0;
  margin-right:0;
}
.stay_banner_strip [class*="col-"]:not(:has(.whatsapp_block)) p{
  margin-left:0;
  margin-right:0;
}
@media (min-width:992px){
  .stay_banner_strip{ padding:62px 0 66px; }
}

@media (prefers-reduced-motion:reduce){
  .stay_banner_strip .whatsapp_block a,
  .stay_banner_strip .whatsapp_block a i{ transition:none; }
  /* the column carries `wow zoomIn`; WOW hides it inline until it fires */
  .stay_banner_strip .wow{ visibility:visible !important; animation:none !important; }
}