/* ===========================================================
   Every selector here is scoped under .louise-section (the wrapper the
   plugin prints around each block) so none of it can leak into the host
   theme. Keep new rules scoped the same way.
   =========================================================== */

/* ===========================================================
   Typography
   =========================================================== */
.louise-section .eyebrow{
  font-size:var(--pc-fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--pc-blue-700);
}
.louise-section h1,.louise-section h2,.louise-section h3,.louise-section h4{margin:0;color:var(--pc-ink-900);font-weight:700;line-height:1.1;letter-spacing:-0.015em}
.louise-section h1{font-size:var(--pc-fs-display);letter-spacing:-0.025em;line-height:1.05}
.louise-section h2{font-size:var(--pc-fs-2xl);letter-spacing:-0.02em;line-height:1.08}
.louise-section h3{font-size:var(--pc-fs-lg);font-weight:700;letter-spacing:-0.01em;line-height:1.2}
.louise-section h4{font-size:var(--pc-fs-md);font-weight:600;letter-spacing:-0.005em;line-height:1.25}
.louise-section em{font-style:italic;font-weight:400}
.louise-section h1 em,.louise-section h2 em,.louise-section h3 em{font-weight:400;color:var(--pc-blue-700)}
/* Re-assert heading styles inside blocks: theme's `body h1/h2/h3` rules (font-weight:500; padding-bottom:.8em) outrank bare element selectors */
.louise-section .shell h1,.louise-section .shell h2,.louise-section .shell h3,.louise-section .shell h4{font-weight:700;padding-bottom:0}
.louise-section .shell h4{font-weight:600}
.louise-section .shell h1 em,.louise-section .shell h2 em,.louise-section .shell h3 em{font-weight:400}
.louise-section p{margin:0 0 1em;max-width:68ch}

.louise-section .shell{width:1400px;max-width:94%;margin:0 auto;padding:0 var(--pc-space-8)}

/* ===========================================================
   Buttons — use the theme's .obj-btn family (pc-updated/style.css).
   Blocks output <a class="obj-btn …"><span class="obj-text">…</span></a>,
   so styling lives in the theme. We only ensure pills size to content
   inside our blocks (the theme uses them in flex/grid wrappers).
   =========================================================== */
.louise-section .obj-btn{display:inline-block;vertical-align:middle}

/* Focus indicators for keyboard nav */
.louise-section a:focus-visible,
.louise-section .obj-btn:focus-visible,
.louise-section button:focus-visible{
  outline:3px solid var(--pc-blue-600);
  outline-offset:3px;
  border-radius:.25rem;
}

/* Screen-reader-only utility */
.louise-section .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===========================================================
   Photo placeholders - real brand cast
   =========================================================== */
.louise-section .photo{
  position:relative;overflow:hidden;border-radius:var(--pc-radius-md);
  background:linear-gradient(180deg,var(--pc-blue-600) 0%,var(--pc-blue-800) 70%,var(--pc-blue-900) 100%);
  color:var(--pc-on-blue-muted);isolation:isolate;
}
/* `.photo > picture` covers WebP Express markup, which wraps the <img>
   in a <picture> — so the bare `.photo > img` selector would miss it. */
.louise-section .photo > img, .louise-section .photo > video, .louise-section .photo > picture{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block;
}
.louise-section .photo > picture > img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.louise-section .photo::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:.10;pointer-events:none;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 480'><g fill='none' stroke='white' stroke-width='1' stroke-opacity='.6'><path d='M0,420 C120,380 200,360 320,360 C420,360 480,400 600,380 C700,365 760,330 800,310'/><path d='M0,360 C140,320 220,300 340,310 C440,318 520,340 640,330 C720,322 770,300 800,290'/><path d='M0,300 C160,260 240,250 360,260 C460,268 540,290 660,275 C740,267 780,250 800,245'/><path d='M0,240 C180,200 260,200 380,210 C480,220 560,235 680,225 C760,217 790,205 800,205'/><path d='M0,180 C200,150 280,160 400,170 C500,180 580,180 700,170 C780,160 800,150 800,150'/><path d='M0,120 C220,100 300,110 420,115 C520,120 600,120 720,110 C800,100 800,95 800,95'/></g></svg>");
  background-size:cover;background-position:center;
}
.louise-section .photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%);
}
.louise-section .photo__caption{
  position:absolute;left:var(--pc-space-4);bottom:var(--pc-space-4);right:var(--pc-space-4);
  z-index:2;display:flex;justify-content:space-between;align-items:end;gap:1rem;
}
.louise-section .photo__caption{display:none}
.louise-section .photo__caption .desc{
  font-style:italic;font-weight:400;font-size:.95rem;color:var(--pc-on-blue);
  max-width:36ch;line-height:1.4;text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.louise-section .photo__caption .meta{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--pc-on-blue-muted);
  border:1px solid color-mix(in oklab,var(--pc-on-blue) 35%,transparent);
  padding:.3rem .55rem;border-radius:var(--pc-radius-sm);white-space:nowrap;
}
.louise-section .photo--16x9{aspect-ratio:16/9}
.louise-section .photo--4x5{aspect-ratio:4/5}
.louise-section .photo--1x1{aspect-ratio:1/1}
.louise-section .photo--3x4{aspect-ratio:3/4}

/* ===========================================================
   Section frame
   =========================================================== */
.louise-section .section{padding:var(--pc-space-24) 0;border-top:1px solid var(--pc-line-200)}
.louise-section .section--hero{padding:var(--pc-space-16) 0 var(--pc-space-24);border-top:0}
.louise-section .section--tint{background:var(--pc-blue-50);border-top:0}
.louise-section .section__index{
  display:flex;align-items:baseline;gap:.85rem;
  color:var(--pc-ink-300);margin-bottom:var(--pc-space-6);
}
.louise-section .section__index .num{
  font-size:1.5rem;color:var(--pc-red-500);font-feature-settings:"tnum";
  font-weight:700;font-style:italic;
}
.louise-section .section__index .label{
  font-size:var(--pc-fs-xs);text-transform:uppercase;letter-spacing:.18em;
  color:var(--pc-ink-700);font-weight:600;
}

/* ===========================================================
   Pill
   =========================================================== */
.louise-section .pill{
  background-color:var(--pc-red-400);color:#fff;
  border:0;
  padding:.4rem .9rem;border-radius:var(--pc-radius-pill);
  text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.8rem;
}
.louise-section .pill .dot{
  display:inline-block;width:.45rem;height:.45rem;background:var(--pc-red-500);
  border-radius:50%;margin-right:.55rem;vertical-align:middle;
}

/* ===========================================================
   Appear (scroll-reveal)
   =========================================================== */
.louise-section .appear{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.louise-section .appear.is-visible{opacity:1;transform:none}

/* ===========================================================
   Slider nav arrows — shared by any slider-enabled block
   (Louise Slider, and Dining when it has more than 3 cards).
   Carousel itself is powered by Swiper; .swiper-slide height:auto
   lets cards stretch to equal height.
   =========================================================== */
.louise-section .louise-slider__nav{display:flex;gap:var(--pc-space-3);flex-shrink:0}
.louise-section .louise-slider__btn{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--pc-blue-800);background:var(--pc-paper);
  color:var(--pc-blue-800);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.louise-section .louise-slider__btn:hover{border-color:var(--pc-blue-600);color:var(--pc-blue-600);transform:scale(1.05)}
.louise-section .louise-slider__btn.swiper-button-disabled{opacity:.3;cursor:not-allowed}
.louise-section .louise-slider__btn.swiper-button-disabled:hover{transform:none}
.louise-section .louise-slider__chevron{width:20px;height:20px}
.louise-section .swiper-slide{height:auto}

@media (max-width:480px){
  .louise-section .shell{padding:0 var(--pc-space-4)}
}

@media (max-width:880px){
  /* Arrows hidden on touch widths — slides are swipeable. */
  .louise-section .louise-slider__nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  .louise-section *{animation:none!important;transition:none!important}
}