/* EalingPulse news list/card selector and compact newsletter opt-in. */
.epn-view-toolbar{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px 14px;
  margin:-7px 0 18px;
  padding:10px 12px;
  overflow:visible;
  border:1px solid #dce7ee;
  border-radius:17px;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(14,48,75,.055);
}
.epn-view-toolbar__label{display:grid;gap:2px;min-width:0}
.epn-view-toolbar__label strong{color:#123b5b;font-size:.88rem;line-height:1.2}
.epn-view-toolbar__label small{color:#728794;font-size:.68rem;line-height:1.25}
.epn-view-switch{display:inline-flex;align-items:center;gap:5px;padding:4px;border:1px solid #d8e4eb;border-radius:13px;background:#f2f7fa}
.epn-view-switch button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:#617989;font:inherit;font-size:.73rem;font-weight:850;cursor:pointer}
.epn-view-switch button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.epn-view-switch button.is-active{background:#fff;color:#0a72ce;box-shadow:0 5px 13px rgba(14,48,75,.10)}

/* Newsletter is a separate compact row, so it never collides with the view controls. */
.epn-newsletter{grid-column:1/-1;min-width:0;padding-top:8px;border-top:1px solid #e2ebef}
.epn-newsletter summary{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:100%;
  min-height:40px;
  margin:0;
  padding:0 12px;
  border:1px solid #c9e3df;
  border-radius:11px;
  background:#f0f9f7;
  color:#087b72;
  font:inherit;
  font-size:.75rem;
  font-weight:900;
  line-height:1.2;
  cursor:pointer;
  list-style:none!important;
  list-style-type:none!important;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.epn-newsletter summary::-webkit-details-marker{display:none!important}
.epn-newsletter summary::marker{content:""!important;font-size:0!important}
.epn-newsletter summary:after{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-left:auto;
  margin-right:2px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.epn-newsletter[open] summary{border-color:#9dd5ce;background:#e2f5f1;color:#076e67}
.epn-newsletter[open] summary:after{transform:rotate(225deg) translate(-2px,-2px)}
.epn-newsletter__icon{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:19px;
  height:14px;
  border:2px solid currentColor;
  border-radius:3px;
  box-sizing:border-box;
}
.epn-newsletter__icon:before,
.epn-newsletter__icon:after{
  content:"";
  position:absolute;
  top:2px;
  width:9px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.epn-newsletter__icon:before{left:1px;transform:rotate(34deg);transform-origin:left center}
.epn-newsletter__icon:after{right:1px;transform:rotate(-34deg);transform-origin:right center}
.epn-newsletter__panel{
  position:relative;
  z-index:2;
  width:100%;
  margin-top:8px;
  padding:15px;
  border:1px solid #d5e6eb;
  border-radius:15px;
  background:#fff;
  box-shadow:0 10px 25px rgba(13,55,82,.09);
}
.epn-newsletter__panel>strong{display:block;margin:0 0 6px;color:#123b5b;font-size:.94rem;line-height:1.3}
.epn-newsletter__panel>p{margin:0 0 13px;color:#687f8c;font-size:.75rem;line-height:1.48}
.epn-newsletter__panel>small{display:block;margin-top:10px;color:#7d909b;font-size:.66rem;line-height:1.45}
.epn-newsletter__message{margin:0 0 11px;padding:9px 10px;border-radius:11px;font-size:.71rem;font-weight:750;line-height:1.4}
.epn-newsletter__message--success{border:1px solid #bfe2d5;background:#edf8f3;color:#176b53}
.epn-newsletter__message--error{border:1px solid #efc9c9;background:#fff3f3;color:#983838}
.epn-newsletter__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.epn-newsletter__form label{display:grid;gap:5px;min-width:0;color:#4f6979;font-size:.68rem;font-weight:800}
.epn-newsletter__form input[type="email"]{width:100%;min-height:42px;padding:0 11px;border:1px solid #cfdfe6;border-radius:11px;background:#fff;color:#17384d;font:inherit;font-size:.78rem;outline:none}
.epn-newsletter__form input[type="email"]:focus{border-color:#4da5d9;box-shadow:0 0 0 3px rgba(28,131,197,.12)}
.epn-newsletter__form button{min-height:42px;padding:0 13px;border:0;border-radius:11px;background:#0a79cf;color:#fff;font:inherit;font-size:.73rem;font-weight:900;cursor:pointer;white-space:nowrap}
.epn-newsletter__form button:hover{background:#096fbd}
.epn-newsletter__trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Default: compact editorial list, matching the homepage's current news rhythm. */
.epn-list[data-view-mode="list"]{display:grid;grid-template-columns:1fr;gap:14px}
.epn-list[data-view-mode="list"] .epn-story{
  display:grid;
  grid-template-columns:clamp(112px,31vw,180px) minmax(0,1fr) 28px;
  align-items:start;
  gap:14px;
  min-height:0;
  padding:12px;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
}
.epn-list[data-view-mode="list"] .epn-story-image{
  width:100%;
  height:100%;
  min-height:126px;
  aspect-ratio:auto;
  border-radius:16px;
}
.epn-list[data-view-mode="list"] .epn-story-copy{align-self:center;min-width:0}
.epn-list[data-view-mode="list"] .epn-story-copy small{display:block;margin-bottom:5px;font-size:.72rem;line-height:1.35}
.epn-list[data-view-mode="list"] .epn-story-copy h2{
  margin:0 0 7px;
  font-size:1.08rem;
  line-height:1.22;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.epn-list[data-view-mode="list"] .epn-story-copy p{
  font-size:.83rem;
  line-height:1.48;
  -webkit-line-clamp:2;
}
.epn-list[data-view-mode="list"] .epn-story-arrow{align-self:center}

/* Optional premium card view. */
.epn-list[data-view-mode="cards"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.epn-list[data-view-mode="cards"] .epn-story{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-height:100%;
  padding:0 0 17px;
  overflow:hidden;
  border-radius:25px;
}
.epn-list[data-view-mode="cards"] .epn-story-image{width:100%;height:auto;aspect-ratio:16/9;border-radius:0}
.epn-list[data-view-mode="cards"] .epn-story-copy{display:block;padding:15px 17px 0}
.epn-list[data-view-mode="cards"] .epn-story-copy small{display:block;margin-bottom:7px;font-size:.72rem}
.epn-list[data-view-mode="cards"] .epn-story-copy h2{margin:0 0 9px;font-size:1.18rem;line-height:1.2}
.epn-list[data-view-mode="cards"] .epn-story-copy p{font-size:.86rem;line-height:1.5;-webkit-line-clamp:3}
.epn-list[data-view-mode="cards"] .epn-story-arrow{display:none}

/* The advert is a normal feed card, never a full-width banner. */
.epn-list .epn-ad-feed{
  grid-column:auto;
  min-width:0;
  width:100%;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease;
}
.epn-list .epn-ad-feed.is-filled{opacity:1;visibility:visible}
.epn-list .epn-ad-feed[hidden]{display:none!important}
.epn-list .epn-ad-feed__unit{display:block!important;width:100%;min-width:0;margin:0}
.epn-list[data-view-mode="list"] .epn-ad-feed{align-self:stretch;min-height:156px;padding:24px 10px 10px;border-radius:22px}
.epn-list[data-view-mode="cards"] .epn-ad-feed{align-self:stretch;min-height:100%;padding:26px 10px 12px;border-radius:25px}

@media(min-width:1024px){
  .epn-list[data-view-mode="list"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .epn-list[data-view-mode="list"] .epn-story{grid-template-columns:155px minmax(0,1fr) 25px;padding:12px}
  .epn-list[data-view-mode="list"] .epn-story-image{min-height:132px}
  .epn-list[data-view-mode="cards"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .epn-list[data-view-mode="cards"] .epn-ad-feed{min-height:370px}
}

@media(max-width:620px){
  .epn-view-toolbar{gap:8px 10px;margin:-6px 0 15px;padding:9px 10px;border-radius:15px}
  .epn-view-toolbar__label small{display:none}
  .epn-view-switch button{min-height:36px;padding:0 10px;font-size:.68rem}
  .epn-newsletter{padding-top:7px}
  .epn-newsletter summary{min-height:38px;padding:0 11px;font-size:.71rem}
  .epn-newsletter__panel{margin-top:7px;padding:13px;border-radius:13px}

  .epn-list[data-view-mode="list"]{gap:14px}
  .epn-list[data-view-mode="list"] .epn-story{
    grid-template-columns:31% minmax(0,1fr);
    gap:12px;
    padding:10px;
    border-radius:21px;
  }
  .epn-list[data-view-mode="list"] .epn-story-image{min-height:142px;border-radius:15px}
  .epn-list[data-view-mode="list"] .epn-story-copy{align-self:start;padding-top:1px}
  .epn-list[data-view-mode="list"] .epn-story-copy small{font-size:.72rem;margin-bottom:6px}
  .epn-list[data-view-mode="list"] .epn-story-copy h2{font-size:1.04rem;line-height:1.2;-webkit-line-clamp:4}
  .epn-list[data-view-mode="list"] .epn-story-copy p{font-size:.82rem;line-height:1.46;-webkit-line-clamp:3}
  .epn-list[data-view-mode="list"] .epn-story-arrow{display:none}

  .epn-list[data-view-mode="cards"]{grid-template-columns:1fr;gap:16px}
  .epn-list[data-view-mode="cards"] .epn-story{padding-bottom:14px;border-radius:23px}
  .epn-list[data-view-mode="cards"] .epn-story-image{aspect-ratio:1.55/1}
  .epn-list[data-view-mode="cards"] .epn-story-copy{padding:13px 14px 0}
  .epn-list[data-view-mode="cards"] .epn-story-copy h2{font-size:1.16rem;-webkit-line-clamp:4}
  .epn-list[data-view-mode="cards"] .epn-story-copy p{font-size:.85rem;-webkit-line-clamp:3}
  .epn-list[data-view-mode="list"] .epn-ad-feed,
  .epn-list[data-view-mode="cards"] .epn-ad-feed{min-height:0;padding:24px 9px 9px;border-radius:21px}
}

@media(max-width:430px){
  .epn-newsletter__form{grid-template-columns:1fr}
  .epn-newsletter__form button{width:100%}
}

@media(max-width:390px){
  .epn-view-toolbar__label strong{font-size:.8rem}
  .epn-view-switch button span{display:none}
  .epn-view-switch button{width:38px;padding:0}
  .epn-newsletter summary{font-size:.68rem}
  .epn-list[data-view-mode="list"] .epn-story{grid-template-columns:34% minmax(0,1fr);gap:10px}
  .epn-list[data-view-mode="list"] .epn-story-image{min-height:132px}
  .epn-list[data-view-mode="list"] .epn-story-copy h2{font-size:.98rem}
  .epn-list[data-view-mode="list"] .epn-story-copy p{font-size:.77rem;-webkit-line-clamp:2}
}


/* v1.3.0 — private per-article live reader counter for the primary administrator.
   In desktop list mode the compact number sits in the same right-hand rail as
   the blue arrow, at the top of the article card exactly above the arrow. */
.epn-story{position:relative}
.epn-story-side{
  position:relative;
  align-self:stretch;
  min-width:25px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.epn-story-live-readers{
  position:absolute;
  top:1px;
  right:0;
  z-index:2;
  min-width:27px;
  height:22px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid #d7e5ec;
  border-radius:999px;
  background:rgba(255,255,255,.97);
  color:#173f5b;
  box-shadow:0 4px 11px rgba(16,54,78,.07);
  font-size:.64rem;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  pointer-events:none;
}
.epn-story-live-readers i{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#16a879;
  box-shadow:0 0 0 2px rgba(22,168,121,.12);
}
.epn-story-live-readers b{font:inherit;color:inherit}
.epn-story-live-readers.is-unavailable i{background:#a8b6bd;box-shadow:none}
.epn-story-live-readers.is-unavailable b{color:#82939d}

/* Card view has no arrow rail, so keep the admin-only number in the top-right
   corner without changing the public card layout. */
.epn-list[data-view-mode="cards"] .epn-story-side{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  width:auto;
  min-width:0;
  height:auto;
}
.epn-list[data-view-mode="cards"] .epn-story-side .epn-story-live-readers{position:static}

@media(max-width:620px){
  /* Mobile list mode removes the arrow column. Float the private counter in
     the same visual corner instead of creating an unwanted third grid column. */
  .epn-list[data-view-mode="list"] .epn-story-side{
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    width:auto;
    min-width:0;
    height:auto;
  }
  .epn-list[data-view-mode="list"] .epn-story-side .epn-story-live-readers{position:static}
}

/* v1.4.0 — Local-first landing with a visible World stream.
   Desktop list view: Local on the left, Latest from the world on the right.
   Card view (and smaller screens): World stories are mixed into the feed at a 2:1 rhythm. */
.epn-dual-stream-layout{display:none;gap:20px;align-items:start}
.epn-stream-column{min-width:0}
.epn-stream-heading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:68px;
  margin:0 0 12px;
  padding:11px 13px;
  border:1px solid #dbe6ed;
  border-radius:17px;
  background:linear-gradient(145deg,#fff,#f7fbfd);
  box-shadow:0 7px 18px rgba(14,48,75,.045);
}
.epn-stream-heading__icon{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#e9f4ff;color:#0878d1}
.epn-stream-heading__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.epn-stream-heading>span:nth-child(2){display:grid;gap:2px;min-width:0}
.epn-stream-heading small{color:#7b909c;font-family:var(--epn-font-ui);font-size:.61rem;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.055em}
.epn-stream-heading strong{color:#143b58;font-family:var(--epn-font-ui);font-size:1.08rem;font-weight:800;line-height:1.18;letter-spacing:-.025em}
.epn-stream-heading>a{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#526e84;background:#fff;border:1px solid #dce6ed}
.epn-stream-heading>a svg{width:17px;height:17px}
.epn-stream-heading--world{border-color:#dfe4f1;background:linear-gradient(145deg,#fbfcff,#f5f7fc)}
.epn-stream-heading--world .epn-stream-heading__icon{background:#edf1fb;color:#526aa3}
.epn-stream-heading--world strong{color:#354f81}
.epn-stream-list{display:grid;gap:13px}
.epn-stream-list .epn-story{
  display:grid;
  grid-template-columns:clamp(118px,29%,150px) minmax(0,1fr) 26px;
  align-items:start;
  gap:12px;
  min-height:0;
  padding:11px;
  border-radius:20px;
}
.epn-stream-list .epn-story-image{width:100%;height:100%;min-height:124px;aspect-ratio:auto;border-radius:15px}
.epn-stream-list .epn-story-copy{align-self:center;min-width:0}
.epn-stream-list .epn-story-copy h2{margin:0 0 6px;font-size:1rem;line-height:1.22;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.epn-stream-list .epn-story-copy p{font-size:.79rem;line-height:1.45;-webkit-line-clamp:2}
.epn-stream-list .epn-story-copy small{font-size:.68rem}
.epn-stream-list .epn-story-arrow{align-self:center}
.epn-stream-list--world .epn-story{grid-template-columns:116px minmax(0,1fr) 24px;border-color:#e1e5ef;background:linear-gradient(145deg,#fff,#fbfcff)}
.epn-stream-list--world .epn-story-image{min-height:108px}
.epn-stream-list--world .epn-story-copy h2{font-size:.94rem;-webkit-line-clamp:3}
.epn-stream-list--world .epn-story-copy p{font-size:.75rem;-webkit-line-clamp:2}
.epn-story-tag--world{background:#edf1fb;color:#4b6295;border:1px solid #d7deef;box-shadow:none}
.epn-story--world-insert{border-color:#dce2ef!important;background:linear-gradient(145deg,#fff,#fbfcff)!important}
.epn-world-more{display:flex;align-items:center;justify-content:center;gap:8px;min-height:45px;margin-top:13px;padding:0 13px;border:1px solid #dce2ef;border-radius:14px;background:#f7f9fd;color:#435d91;font-size:.75rem;font-weight:850;text-decoration:none}
.epn-world-more svg{width:16px;height:16px}

/* Default Local landing: use the split layout only for desktop List mode. */
body[data-news-scope="local"][data-current-view="list"] .epn-dual-stream-layout{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(350px,.84fr)}
body[data-news-scope="local"][data-current-view="list"] .epn-list.epn-main-feed--mixed{display:none!important}
body[data-news-scope="local"][data-current-view="cards"] .epn-dual-stream-layout{display:none!important}
body[data-news-scope="local"][data-current-view="cards"] .epn-list.epn-main-feed--mixed{display:grid!important}

@media(min-width:1280px){
  body[data-news-scope="local"][data-current-view="list"] .epn-dual-stream-layout{grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr);gap:22px}
}

/* On phones/tablets, never bury World news below a long Local column. Keep the
   existing list/card UI, but use the same mixed 2-local / 1-world feed. */
@media(max-width:899px){
  body[data-news-scope="local"] .epn-dual-stream-layout{display:none!important}
  body[data-news-scope="local"] .epn-list.epn-main-feed--mixed{display:grid!important}
}

@media(max-width:620px){
  .epn-story-tag--world{margin-bottom:5px;padding:4px 7px;font-size:.55rem}
  .epn-list.epn-main-feed--mixed[data-view-mode="list"] .epn-story--world-insert{border-left:3px solid #7183b0!important}
}

/* v1.4.1 — Mobile News page restored to the original scope behaviour.
   Desktop keeps the new Local/World companion layout and mixed card view.
   On phones/tablets the Local tab shows only Local stories; World remains
   available through the existing Local / World switch at the top. */
@media(max-width:899px){
  body[data-news-scope="local"] .epn-dual-stream-layout{display:none!important}
  body[data-news-scope="local"] .epn-list.epn-main-feed--mixed{display:grid!important}
  body[data-news-scope="local"] .epn-list.epn-main-feed--mixed .epn-story--world-insert{display:none!important}
}

/* v1.4.2 — Fix: Local news feed must remain visible on mobile.
   The desktop list rule uses a more specific !important selector, so the
   previous mobile override could not win. Match that specificity for both
   List and Cards, keep the desktop dual stream hidden on mobile, and keep
   World stories out of the Local mobile tab. */
@media(max-width:899px){
  body[data-news-scope="local"][data-current-view="list"] .epn-dual-stream-layout,
  body[data-news-scope="local"][data-current-view="cards"] .epn-dual-stream-layout{display:none!important}

  body[data-news-scope="local"][data-current-view="list"] .epn-list.epn-main-feed--mixed,
  body[data-news-scope="local"][data-current-view="cards"] .epn-list.epn-main-feed--mixed{display:grid!important}

  body[data-news-scope="local"] .epn-list.epn-main-feed--mixed .epn-story--world-insert{display:none!important}
}

/* v1.20.9 — mobile news list: slightly wider thumbnails for a calmer, less cropped card. */
@media (max-width:720px){
  .epn-list[data-view-mode="list"] .epn-story{
    grid-template-columns:35.5% minmax(0,1fr);
    gap:10px;
    padding:9px;
  }
  .epn-list[data-view-mode="list"] .epn-story-image{
    min-height:142px;
  }
}
@media (max-width:390px){
  .epn-list[data-view-mode="list"] .epn-story{
    grid-template-columns:38% minmax(0,1fr);
    gap:9px;
    padding:8px;
  }
  .epn-list[data-view-mode="list"] .epn-story-image{
    min-height:132px;
  }
}

/* v1.4.3 — mobile: keep List/Cards and Newsletter on one compact row */
@media(max-width:600px){
  .epn-main .epn-view-toolbar{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 10px!important;
    min-height:0!important;
  }
  .epn-main .epn-view-toolbar__label{display:none!important}
  .epn-main .epn-view-switch{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    margin:0!important;
  }
  .epn-main .epn-newsletter{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    width:auto!important;
    max-width:150px!important;
    margin:0!important;
    padding:0!important;
    border-top:0!important;
  }
  .epn-main .epn-newsletter summary{
    width:auto!important;
    min-height:35px!important;
    padding:0 10px!important;
    gap:7px!important;
    white-space:nowrap!important;
  }
  .epn-main .epn-newsletter[open]{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    margin-top:0!important;
  }
  .epn-main .epn-newsletter[open] summary{
    width:max-content!important;
    max-width:150px!important;
    margin-left:auto!important;
  }
  .epn-main .epn-newsletter__panel{width:100%!important}
}

@media(max-width:360px){
  .epn-main .epn-view-toolbar{gap:6px!important;padding-inline:8px!important}
  .epn-main .epn-view-switch button{width:36px!important}
  .epn-main .epn-newsletter{max-width:138px!important}
  .epn-main .epn-newsletter summary{padding-inline:8px!important;font-size:.63rem!important}
}