/* ============================================================
   HowfenConnect — News and Events v2.

   Loaded AFTER hc-businesses-v2.css, which supplies the .bf-* search and
   filter controls and .card-initial. Everything else here is its own.

   The shape of it:
     NEWS INDEX    inset hero card with the headline on the photo, then rows
     NEWS ARTICLE  full-bleed hero, white panel riding up over it
     EVENTS INDEX  no photographs at all — a diary led by the time
     EVENT PAGE    full-bleed hero, details panel beside the write-up

   Index pages use the inset card, inside pages run the photo to the edges.
   That split is what the reference apps all do, and it is deliberate.
   ============================================================ */

.nv2,.ev2{padding:48px 0 72px;color:#000}
/* the article page sets its own: .na is not .nv2 */
.na{color:#000}

/* .na has to be in here too. It was left out, so every link on the article
   page fell back to the browser default — "All news" came out underlined over
   the photograph, and so did "Back to all news" and the share button.

   The colour half is split out into :where(), which counts for nothing at all
   in the cascade. `.ev2 a` is a class AND a type, so it outranks every single
   class below it: .ev2-btn says color:ink, .ev2 a said color:inherit, and the
   .ev2-next panel is near-black, so the button label came out white on amber
   and white-on-white. :where() loses to all of them, which is the whole
   point — a plain link still inherits, a button keeps the colour it sets. */
.nv2 a,.ev2 a,.na a{text-decoration:none}
:where(.nv2,.ev2,.na) a{color:inherit}

/* ---------- shared page head ---------- */
.ev2-head{text-align:center;max-width:700px;margin:0 auto}
/* Matched to .script in the v1 theme, which is 2rem / margin 0 0 6px /
   line-height 1 / accent-dark. It was 1.9rem with no bottom margin, which is
   why the two never quite lined up. font-weight stays at 600 because that is
   the only Caveat weight the site actually loads. */
.ev2-script{margin:0 0 6px;font-family:'Caveat',cursive;font-weight:600;font-size:2rem;
  line-height:1;color:var(--accent-dark,#D8A422)}
/* Both matched to the v1 browse page, which is the established pair:
     .browse .sec-head h1   clamp(2rem,4.2vw,3.25rem) / -.035em
     .browse .sec-sub       1.05rem
   They were clamp(2.1rem,5vw,3.15rem) and 1.06rem — close enough that it
   looked like a mistake rather than a decision, which it was. */
.ev2-head h1{margin:6px 0 0;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.04;
  letter-spacing:-.035em;font-weight:800}
.ev2-sub{margin:14px auto 0;font-size:1.05rem;line-height:1.5;max-width:640px}

.nv2-search{max-width:560px;margin:26px auto 0}
.nv2-search .bf-row{flex-wrap:nowrap}

/* ---------- the kicker that sits above every headline ---------- */
.nv2-kicker{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-dark,#D8A422)}

/* ============================================================
   NEWS INDEX
   ============================================================ */
.nv2-top{margin-top:38px;display:flex;gap:26px;flex-wrap:wrap;align-items:stretch}

.nv2-lead{flex:999 1 560px;min-width:0;position:relative;min-height:460px;
  border-radius:24px;overflow:hidden;display:block;background:#E7E5DE}
.nv2-lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the ramp starts well down the image so the picture is not muddied */
.nv2-lead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,20,36,0) 36%,rgba(15,20,36,.86))}
.nv2-flag{position:absolute;z-index:2;top:20px;left:20px;padding:8px 16px;border-radius:999px;
  background:var(--accent,#F2C14E);color:#000;
  font-size:.78rem;font-weight:800}
.nv2-lead-body{position:absolute;z-index:2;left:28px;right:28px;bottom:26px}
.nv2-lead-meta{display:block;font-size:.84rem;font-weight:600;color:#fff}
.nv2-lead-title{display:block;margin-top:10px;font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.12;letter-spacing:-.035em;font-weight:800;color:#fff}

.nv2-side{flex:1 1 360px;min-width:0;max-width:440px;
  display:flex;flex-direction:column;justify-content:space-between;gap:20px}

/* ---------- the row ----------
   Square tile, kicker, clamped title, date. It is the pattern that still
   looks deliberate when a story has no cover, because the tile falls back to
   a letter the way the business cards do. */
.nv2-row{display:flex;align-items:flex-start;gap:16px}
.nv2-row-img{position:relative;flex:none;width:108px;height:108px;border-radius:20px;
  overflow:hidden;background:#E7E5DE;display:block}
.nv2-row-img img{width:100%;height:100%;object-fit:cover;display:block}
.nv2-row-img .card-initial{font-size:2rem}
.nv2-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.nv2-row-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;font-size:1.08rem;line-height:1.26;letter-spacing:-.025em;font-weight:700}
.nv2-row-ex{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;font-size:.88rem;line-height:1.45}
.nv2-date{display:block;font-size:.84rem;font-weight:600}
.nv2-row:hover .nv2-row-title{color:var(--accent-dark,#D8A422)}

.nv2-sec{margin-top:52px;display:flex;align-items:center;gap:16px}
.nv2-sec h2{margin:0;font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.035em;font-weight:800}
.nv2-sec-all{margin-left:auto;padding:11px 20px;border-radius:999px;
  background:var(--accent,#F2C14E);color:#000;
  font-size:.88rem;font-weight:800;
  display:inline-flex;align-items:center;gap:10px;transition:background .14s ease}
.nv2-sec-all:hover{background:var(--accent-dark,#D8A422)}
.nv2-sec-all svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none}

.nv2-rows{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 40px}
.nv2-rows .nv2-row{padding:16px 0;border-bottom:1px solid #EFEDE8;gap:18px}
.nv2-rows .nv2-row-img{width:124px;height:96px;border-radius:18px}

/* ============================================================
   NEWS ARTICLE — the photo runs to the edges, the story rides over it
   ============================================================ */
.na-hero{position:relative;height:clamp(380px,56vw,620px);overflow:hidden;background:#1C2436}
.na-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.na-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:1;
  background:linear-gradient(180deg,rgba(15,20,36,.5),rgba(15,20,36,0))}
.na-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;z-index:1;
  background:linear-gradient(180deg,rgba(15,20,36,0),rgba(15,20,36,.8) 58%,rgba(15,20,36,.93))}

.na-top{position:absolute;z-index:3;left:0;right:0;top:20px}
.na-top .wrap{display:flex;align-items:center;gap:12px}
.na-btn{height:46px;padding:0 20px;border:0;border-radius:999px;
  background:rgba(255,255,255,.2);color:#fff;font:inherit;font-size:.92rem;font-weight:700;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.na-btn:hover{background:rgba(255,255,255,.32);color:#fff}
.na-btn svg{width:17px;height:17px;stroke:#fff;fill:none}
.na-btn-ico{width:46px;padding:0;justify-content:center}
.na-spacer{flex:1}

.na-head{position:absolute;z-index:2;left:0;right:0;bottom:clamp(44px,6vw,78px)}
.na-pill{display:inline-flex;align-items:center;padding:8px 18px;border-radius:999px;
  background:var(--accent,#F2C14E);color:#000;font-size:.8rem;font-weight:800}
.na-head h1{margin:18px 0 0;max-width:940px;font-size:clamp(1.9rem,4.4vw,3.5rem);
  line-height:1.05;letter-spacing:-.04em;font-weight:800;color:#fff}
.na-meta{margin:14px 0 0;font-size:.92rem;font-weight:600;color:#fff}

/* The panel. -40px is what makes it ride over the photo rather than sit under
   it.

   z-index:2 is not decoration. .na-hero::after is the dark gradient and it
   carries z-index:1; .na-hero itself is positioned with z-index:auto, so that
   ::after does NOT get trapped inside it — it paints in the same stacking
   context as this panel. Without a z-index here the panel is z-index:auto,
   the gradient wins, and the top 40px of the white sheet — which is exactly
   where the share row sits — gets painted over in near-black. */
.na-sheet{position:relative;z-index:2;margin-top:-40px;border-radius:36px 36px 0 0;
  background:#fff;padding:36px 0 72px}

.na-share{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px}
/* amber with the glyph in ink — the icons carry fill/stroke:currentColor, so
   colour here is all it takes */
.na-ico{width:44px;height:44px;flex:none;border:0;border-radius:999px;
  background:var(--accent,#F2C14E);color:#000;
  display:grid;place-items:center;cursor:pointer;transition:background .14s ease}
.na-ico:hover{background:var(--accent-dark,#D8A422)}
.na-ico svg{width:17px;height:17px}

/* ---------- the share button ----------
   partials/share-btn-v2.blade.php, the same one as the business profile
   pages. It takes its look from whatever class it is given (.na-btn
   .na-btn-ico on the photograph, .ev2-btn in the footer); the only thing
   that belongs to the button itself is the "Link copied" pill, which is
   what it falls back to when the browser has no share sheet.

   position:relative is load-bearing — the pill is absolute against it. */
.hc-share{position:relative;border:0;cursor:pointer;font-family:inherit}
.hc-share.copied::after{content:"Link copied";position:absolute;z-index:5;
  top:calc(100% + 8px);right:0;white-space:nowrap;
  background:#000;color:#fff;font-size:.78rem;font-weight:700;
  padding:6px 11px;border-radius:999px}

.na-when{margin-left:auto;padding:12px 18px;border-radius:999px;background:#F3F2EE;
  font-size:.88rem;font-weight:700;white-space:nowrap}

.na-col{max-width:760px;margin:0 auto}
.na-stand{margin:28px 0 0;font-size:clamp(1.08rem,1.6vw,1.34rem);line-height:1.48;font-weight:600}

/* The body is admin HTML, so it is styled by element rather than by class. */
.na-body{margin-top:24px;font-size:1.14rem;line-height:1.68}
.na-body > *:first-child{margin-top:0}
.na-body p{margin:0 0 1.2em}
.na-body h2{margin:1.6em 0 .5em;font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.2;
  letter-spacing:-.03em;font-weight:800}
.na-body h3{margin:1.4em 0 .4em;font-size:1.25rem;letter-spacing:-.025em;font-weight:800}
.na-body ul,.na-body ol{margin:0 0 1.2em;padding-left:1.4em}
.na-body li{margin-top:.55em}
.na-body a{font-weight:700;border-bottom:2px solid var(--accent,#F2C14E)}
.na-body a:hover{color:var(--accent-dark,#D8A422)}
.na-body img{max-width:100%;height:auto;border-radius:18px;margin:1.4em 0}
.na-body blockquote{margin:1.8em 0;padding:26px 30px;border-radius:22px;background:#FBFAF8;
  border-left:5px solid var(--accent,#F2C14E);font-size:1.3rem;line-height:1.38;
  font-weight:700;letter-spacing:-.02em}
.na-body blockquote p:last-child{margin-bottom:0}
.na-body hr{margin:2em 0;border:0;border-top:1px solid var(--line,#E5E7EB)}

.na-foot{max-width:760px;margin:40px auto 0;padding-top:24px;
  border-top:1px solid var(--line,#E5E7EB);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.na-back{display:inline-flex;align-items:center;gap:11px;font-size:1rem;font-weight:800;
  color:var(--accent-dark,#D8A422)}
.na-back svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* "More from the town" is held to the same 760px as the story above it. It
   used to run the full 1320px in three columns, which made the foot of the
   page spread out twice as wide as everything above it and read as a
   different page bolted on. One column, divided, is the same list the index
   uses and it lines up with the article. */
.na-more{max-width:760px;margin:56px auto 0}
.na-more-grid{margin-top:18px;display:grid;grid-template-columns:1fr}
.na-more-grid .nv2-row{padding:16px 0;border-bottom:1px solid #EFEDE8;gap:18px}
.na-more-grid .nv2-row-img{width:124px;height:96px;border-radius:18px}

/* ============================================================
   EVENT PAGE — the news article's bones, plus a facts panel

   Everything else on this page (.na-hero, .na-sheet, .na-share, .na-col,
   .na-body, .na-foot, .na-more) is shared with the news article, so there is
   nothing to repeat here. Only the facts panel and the "also coming up" list
   belong to events.
   ============================================================ */
.ev2-facts{max-width:760px;margin:28px auto 0;border:1px solid var(--line,#E5E7EB);
  border-radius:24px;background:#FBFAF8;padding:26px 30px;
  display:flex;flex-wrap:wrap;gap:26px 46px;align-items:flex-start}
/* flex-start, not flex-end: "When" carries two lines and the others one, and
   bottom-aligning them staggered the three labels down the panel. */
.ev2-fact{min-width:0;display:flex;flex-direction:column;gap:5px}
.ev2-fact-k{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-dark,#D8A422)}
.ev2-fact-v{font-size:1.08rem;line-height:1.3;font-weight:700}
.ev2-fact-act{margin-left:auto;align-self:center}

/* no photographs in this list, same as the diary on the listing */
.ev2-more-list{margin-top:4px}
.ev2-more-list .ev2-row:first-child{border-top:1px solid #EFEDE8}

/* ============================================================
   EVENTS INDEX — no photographs anywhere
   ============================================================ */
/* Next up. With no picture to carry it, the date does the work. */
.ev2-next{max-width:1000px;margin:38px auto 0;border-radius:26px;background:var(--ink,#0F1424);
  color:#fff;padding:34px 38px;display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.ev2-next-date{flex:none;width:126px;text-align:center}
.ev2-next-dow{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent,#F2C14E)}
.ev2-next-day{margin-top:2px;font-size:4.4rem;line-height:.92;letter-spacing:-.05em;font-weight:800}
.ev2-next-mon{margin-top:6px;font-size:1.05rem;font-weight:700}
.ev2-next-body{flex:999 1 400px;min-width:0}
.ev2-next-kick{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent,#F2C14E)}
.ev2-next-body h2{margin:12px 0 0;font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.08;
  letter-spacing:-.035em;font-weight:800}
.ev2-next-ex{margin:12px 0 0;font-size:1.04rem;line-height:1.5;color:#fff;max-width:520px}
/* Time on its own line, venue under it. Both used to be hung off a middle
   dot — "Next up · 7:00pm" and "The Beer School · £35 per person". The dots
   are gone and so is the price. */
.ev2-next-where{margin:14px 0 0;font-size:1rem;font-weight:600;color:#fff}
.ev2-next-where span{display:block}
.ev2-next-time{font-weight:800}
.ev2-next-where span + span{margin-top:4px}
.ev2-next-acts{flex:none;display:flex;flex-direction:column;gap:10px}

/* border:0 and font-family:inherit are because "Share this story" on the
   article is a <button> now, not an <a> — it opens the device share sheet.
   A button comes with a UA border and does not inherit the page font, so
   without these it drew an outline and set itself in Arial. */
.ev2-btn{height:54px;padding:0 28px;border:0;border-radius:999px;
  background:var(--accent,#F2C14E);color:#000;
  font-family:inherit;font-size:1rem;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  transition:background .14s ease}
.ev2-btn:hover{background:var(--accent-dark,#D8A422)}
.ev2-btn svg{width:15px;height:15px;stroke:#000;fill:none}

/* The arrow in a circle, same as "Add your event" lower down the page. The
   circle is the OPPOSITE colour to the button it sits in: white on the amber
   one, amber on the white one. An <i> only, so the plain-svg buttons
   elsewhere ("Share this story") are untouched. */
.ev2-btn:has(i){padding:0 8px 0 26px}
.ev2-btn i{width:40px;height:40px;flex:none;border-radius:999px;background:#fff;
  display:grid;place-items:center;font-style:normal}
.ev2-btn i svg{width:15px;height:15px;stroke:#000;fill:none}

/* The second button on the ink panel. Solid white, not an outline: a ghost
   button on a near-black panel reads as disabled next to a filled amber one,
   and this one is the link most people actually want. */
.ev2-btn-white{background:#fff}
.ev2-btn-white:hover{background:#ECE9E1}
.ev2-btn-white i{background:var(--accent,#F2C14E)}

.ev2-btn-ghost{background:none;border:1px solid rgba(255,255,255,.28);color:#fff}
.ev2-btn-ghost:hover{background:rgba(255,255,255,.1)}
.ev2-btn-ghost svg{stroke:#fff}

/* the diary */
.ev2-list{max-width:1000px;margin:0 auto}
.ev2-day{margin-top:48px;display:flex;align-items:baseline;gap:16px;
  padding-bottom:13px;border-bottom:2px solid var(--ink,#0F1424)}
.ev2-day h2,.ev2-day h3{margin:0;font-size:clamp(1.25rem,2.6vw,1.6rem);letter-spacing:-.035em;font-weight:800}
.ev2-day span{font-size:.94rem;font-weight:700;color:var(--accent-dark,#D8A422)}

/* The day heading already carries the date, so the row leads with the TIME.
   That is what makes it read as a timetable and not as a feed with the
   pictures taken out. */
.ev2-row{display:flex;align-items:flex-start;gap:26px;padding:20px 4px;
  border-bottom:1px solid #EFEDE8}
.ev2-row:hover .ev2-row-title{color:var(--accent-dark,#D8A422)}
.ev2-time{flex:none;width:118px;padding-top:2px}
.ev2-from{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.ev2-to{display:block;margin-top:2px;font-size:.92rem;font-weight:600;color:var(--accent-dark,#D8A422)}
.ev2-row-body{flex:1;min-width:0}
.ev2-row-title{display:block;font-size:1.26rem;line-height:1.25;letter-spacing:-.03em;font-weight:700}
.ev2-where{display:block;margin-top:7px;font-size:.96rem;line-height:1.45}
.ev2-row-end{flex:none;display:flex;align-items:center;gap:16px;padding-top:2px}
.ev2-price{padding:7px 15px;border-radius:999px;background:#F3F2EE;font-size:.84rem;
  font-weight:800;white-space:nowrap}
.ev2-go{width:44px;height:44px;flex:none;border-radius:999px;background:var(--accent,#F2C14E);
  display:grid;place-items:center}
.ev2-go svg{width:17px;height:17px;stroke:#000;fill:none}

.ev2-scope{margin:0 0 18px;text-align:center;font-size:1rem}
.ev2-scope a{margin-left:10px;font-weight:700;color:var(--accent-dark,#D8A422)}

/* ---------- empty state ---------- */
.ev2-none{max-width:1000px;margin:34px auto 0;border:1px solid var(--line,#E5E7EB);
  border-radius:22px;background:#FBFAF8;padding:48px 32px;text-align:center}
.ev2-none h2{margin:0;font-size:1.5rem;letter-spacing:-.03em;font-weight:800}
.ev2-none p{margin:10px 0 0;font-size:1rem}
.ev2-none .ev2-btn{margin-top:22px}

/* ---------- submit prompt ---------- */
.ev2-cta{max-width:1000px;margin:52px auto 0;border:1px solid var(--line,#E5E7EB);
  border-radius:24px;background:#FBFAF8;padding:32px 36px;display:flex;align-items:center;
  justify-content:space-between;gap:30px;flex-wrap:wrap}
.ev2-cta > div{flex:1 1 400px;min-width:0}
.ev2-cta h2{margin:0;font-size:1.5rem;letter-spacing:-.03em;font-weight:800}
.ev2-cta p{margin:8px 0 0;font-size:1rem;line-height:1.5}
.ev2-cta-btn{flex:none;height:56px;padding:0 8px 0 26px;border-radius:999px;
  background:var(--accent,#F2C14E);display:flex;align-items:center;gap:14px;
  font-size:1rem;font-weight:800;transition:background .14s ease}
.ev2-cta-btn:hover{background:var(--accent-dark,#D8A422)}
.ev2-cta-btn i{width:40px;height:40px;flex:none;border-radius:999px;background:#fff;
  display:grid;place-items:center;font-style:normal}
.ev2-cta-btn svg{width:16px;height:16px;stroke:#000;fill:none}

.ev2-past{margin:26px 0 0;text-align:center;font-size:1rem}
.ev2-past a{display:inline-flex;align-items:center;gap:9px;font-weight:700;
  color:var(--accent-dark,#D8A422)}
.ev2-past svg{width:15px;height:15px;stroke:currentColor;fill:none}

/* ============================================================
   PAGER — markup from partials/pager-v2.blade.php, not Laravel's paginator
   view, so these selectors describe elements this site owns.
   ============================================================ */
.pgr{margin-top:42px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.pgr-nums{display:flex;align-items:center;gap:8px}
.pgr-step,.pgr-num{min-width:46px;height:46px;padding:0 14px;box-sizing:border-box;
  border:1px solid var(--line,#E5E7EB);border-radius:999px;background:#fff;
  color:#000;font-size:.97rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .14s ease,border-color .14s ease}
.pgr-step svg{width:17px;height:17px;stroke:currentColor;fill:none}
a.pgr-step:hover,a.pgr-num:hover{background:var(--accent,#F2C14E);border-color:var(--accent,#F2C14E)}
.pgr-num.is-on{background:var(--accent,#F2C14E);border-color:var(--accent,#F2C14E);font-weight:800}
.pgr-step.is-off{opacity:.3}
.pgr-gap{min-width:18px;text-align:center;font-weight:700}
.pgr-of{display:none;font-size:.97rem;font-weight:700;padding:0 6px}

/* ============================================================
   Narrow
   ============================================================ */
@media (max-width:980px){
  .nv2-lead{min-height:0;aspect-ratio:1.5/1;flex-basis:100%}
  .nv2-side{max-width:none}
  .nv2-rows{grid-template-columns:1fr;gap:0}
  .ev2-next{padding:26px 24px;gap:24px}
  .ev2-next-acts{width:100%}
  /* full width, so the arrow circle goes to the far end rather than sitting
     next to the label in the middle */
  .ev2-next-acts .ev2-btn{width:100%;justify-content:space-between}
}

@media (max-width:640px){
  .nv2,.ev2{padding:32px 0 56px}
  /* .ev2-script does NOT shrink on phones. .script in hc-theme.css stays at
     2rem at every width, and this used to drop to 1.5rem — so the two matched
     on a desktop and did not on a phone, which is the hardest kind of
     mismatch to spot. */
  .ev2-sub{font-size:.97rem}

  .nv2-top{margin-top:24px;gap:22px}
  .nv2-lead{border-radius:20px;aspect-ratio:1.35/1}
  .nv2-lead-body{left:18px;right:18px;bottom:18px}
  .nv2-flag{top:14px;left:14px;padding:7px 14px;font-size:.72rem}
  .nv2-row-img,.nv2-rows .nv2-row-img{width:96px;height:96px;border-radius:18px}
  .nv2-sec{margin-top:34px}
  .nv2-rows .nv2-row{gap:14px}
  .nv2-row-ex{display:none}

  .na-sheet{border-radius:28px 28px 0 0;padding:24px 0 56px}
  .na-top{top:14px}
  .na-btn{height:44px;padding:0 16px;font-size:.86rem}
  .na-btn-ico{width:44px;padding:0}
  .na-share{gap:9px}
  .na-when{padding:10px 15px;font-size:.82rem}
  .na-stand{margin-top:20px}
  .na-body{font-size:1.05rem}
  .na-more-grid .nv2-row-img{width:96px;height:96px}

  .ev2-facts{margin-top:20px;border-radius:20px;padding:20px 18px;gap:18px}
  .ev2-fact-act{margin-left:0;width:100%}
  .ev2-fact-act .ev2-btn{width:100%;justify-content:space-between}

  .ev2-next{border-radius:22px;padding:22px 18px 24px}
  .ev2-next-date{width:84px}
  .ev2-next-day{font-size:3.3rem}

  .ev2-day{margin-top:30px}
  /* the time column stays — it is the point of the layout — but the price
     and the arrow drop under the venue so the title keeps its width */
  .ev2-row{gap:16px;padding:16px 2px}
  .ev2-time{width:82px}
  .ev2-from{font-size:1rem}
  .ev2-to{font-size:.82rem}
  .ev2-row-title{font-size:1.05rem}
  .ev2-where{font-size:.88rem}
  .ev2-row{flex-wrap:wrap}
  .ev2-row-end{width:100%;padding-left:98px;padding-top:10px;gap:12px}
  .ev2-row-end .ev2-go{margin-left:auto}

  .ev2-cta{padding:24px 20px;gap:18px}
  .ev2-cta-btn{width:100%;justify-content:space-between}

  .pgr-nums{display:none}
  .pgr-of{display:inline-flex;align-items:center}
  .pgr{gap:14px}
}

/* ============================================================
   NEWS ARTICLE on a desktop — the photograph is contained and rounded.

   Full bleed is a phone idiom: on a 390px screen the picture edge-to-edge IS
   the top of the page. At 1400px the same picture is a 600px-tall band across
   the whole window with a headline floating in it, which is a lot of nothing
   either side of the words. So above 820px it comes in to the page width and
   takes the same 32px corners everything else on the site has.

   The riding-up sheet goes with it. A full-width white panel with rounded top
   corners sliding under a contained rounded photo cuts across the photo's own
   bottom corners — the two shapes fight. On a desktop the panel just sits
   below the picture, so margin and radius both go back to nothing.

   Placed last on purpose: it has to beat the max-width blocks above it at the
   widths where both could apply.
   ============================================================ */
@media (min-width:821px){
  .na-hero{width:min(var(--wrap,1320px),calc(100% - 48px));margin:24px auto 0;
    border-radius:32px;height:clamp(420px,44vw,580px)}
  .na-hero::before{border-radius:32px 32px 0 0}

  /* the gradient is what the white headline is legible against, so it keeps
     its own bottom corners rather than squaring off inside the rounded box */
  .na-hero::after{border-radius:0 0 32px 32px}

  .na-sheet{margin-top:0;border-radius:0;padding-top:40px}

  /* the floating row sits inside the rounded photo now, so it does not need
     the full page gutter on top of the hero's own inset */
  .na-top{top:22px}

  /* ---- lining up with the photograph ----
     Everything under the hero runs the full width of the picture, the
     paragraphs included, so the page has one left edge and one right edge. */
  .na-share,.na-foot,.na-more,.na-col,.ev2-facts{max-width:none;margin-left:0;margin-right:0}

  /* at the full width this goes back to three across */
  .na-more-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 30px}
}


/* ============================================================
   HOMEPAGE — the news and events sections inside home-v2.blade.php.

   Head centred, button under the list. It used to sit on the heading line on
   a desktop and drop underneath on a phone; one position at both widths is
   less to read and far less to keep right — the two-position version had the
   button full width on phones, then not full width, then hidden with no
   replacement, over three goes.
   ============================================================ */
.hv2-sec-head{text-align:center;max-width:760px;margin:0 auto 30px}
.hv2-sec-h2{margin:0;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.04;
  letter-spacing:-.035em;font-weight:800}

.hv2-foot-btn{display:flex;justify-content:center;margin-top:34px}
/* The .ev2-cta panel sets .ev2-cta-btn to width:100% at 640px, for "Add your
   event", which IS meant to be full width. This one is not — two classes beat
   one, inside a media query or out of it. */
.hv2-foot-btn .ev2-cta-btn{width:auto;justify-content:center}

/* .card-initial comes from hc-businesses-v2.css, which the news and events
   pages load and the homepage may not. A bare letter sitting in the corner of
   a photo slot reads as a bug, so the fallback is restated here rather than
   assumed. */
.nv2-lead .card-initial,
.nv2-row-img .card-initial{position:absolute;inset:0;display:grid;place-items:center;
  background:#E7E5DE;color:#000;font-weight:800;letter-spacing:-.03em}
.nv2-lead .card-initial{font-size:5rem}

@media (max-width:640px){
  .hv2-sec-head{margin-bottom:22px}
  .hv2-foot-btn{margin-top:30px}
}