/* Insights articles and the insights hub. Load after css/tokens.css, css/lp.css and css/site.css.
   Class names are the ones ops/b4-blocks.mjs and ops/b4-hub.mjs emit, so regenerating never needs inline styles. */

/* reading column: about 66 characters of Inter at body size; wide things (tables) break out of it */
.insight{--col:36rem;padding-bottom:var(--sp-9)}
.insight>*{max-width:var(--col)}
.insight>.insight-head{max-width:min(52rem,100%)}

/* head: headline and the meta row */
.insight-head{padding:var(--sp-5) 0 0}
.insight-head h1,.insight-hub-head h1{font-size:clamp(32px,25px + 2.1vw,52px);line-height:1.1}
.insight-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-5);margin-top:var(--sp-4);font-size:var(--fs-small);color:var(--c-faint)}
.insight-meta span:last-child{color:var(--c-amber);font-weight:600;letter-spacing:.04em}

/* key takeaways and the short answer */
.insight-tldr{margin-top:var(--sp-6);padding:var(--sp-5);background:var(--c-card);border:1px solid rgba(232,182,90,.35);border-radius:var(--r-md)}
.insight-tldr-title{font:600 var(--fs-eyebrow)/1.3 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-amber);margin-bottom:var(--sp-4)}
.insight-tldr-lead{color:var(--c-ink);font-size:1.06em;line-height:1.6}
.insight-answer{border-left:3px solid var(--c-amber);padding-left:var(--sp-4)}
.insight-tldr-lead strong{color:var(--c-ink);font-weight:600}
.insight-tldr-list{margin-top:var(--sp-4);padding-left:1.3em;list-style:disc;font-size:.94em;line-height:1.6}
.insight-tldr-list li+li{margin-top:var(--sp-3)}
.insight-tldr-list li::marker{color:var(--c-amber)}
.insight-tldr-list strong{color:var(--c-ink);font-weight:600}

/* decorative title card (the figure repeats the headline as an image) */
.insight-figure{margin-top:var(--sp-6)}
.insight-figure svg{width:100%;height:auto;display:block;border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden}

/* article text */
.insight-body{margin-top:var(--sp-7);font-size:var(--fs-body);line-height:1.7}
.insight-body>*+*{margin-top:var(--sp-4)}
.insight-body>h2{font-size:clamp(26px,22px + 1.2vw,34px);margin-top:var(--sp-8)}
.insight-body>h3{font-size:clamp(20px,18.5px + .4vw,23px);margin-top:var(--sp-6)}
.insight-body>h2+*,.insight-body>h3+*{margin-top:var(--sp-3)}
.insight-body>:first-child{margin-top:0}
.insight-body>.insight-region{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--c-border-strong)}
.insight-body>.insight-region{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--c-border-strong)}
.insight-body ul,.insight-body ol{padding-left:1.4em}
.insight-body ul{list-style:disc}
.insight-body ol{list-style:decimal}
.insight-body li::marker{color:var(--c-amber)}
.insight-body li+li{margin-top:var(--sp-2)}
.insight-body strong{color:var(--c-ink);font-weight:600}
.insight-body a{overflow-wrap:anywhere}

/* tables: scroll in a focusable named region from 768px, stacked cards below (cells carry data-label) */
.insight-table-wrap{width:min(60rem,calc(100vw - 2*var(--gutter)));max-width:none;overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--r-md)}
.insight-table{width:100%;min-width:34rem;border-collapse:collapse;font-size:15px;line-height:1.55}
.insight-table th,.insight-table td{padding:var(--sp-3) var(--sp-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--c-border)}
.insight-table thead th{font:600 12px/1.3 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-faint);background:var(--c-raised)}
.insight-table tbody tr:last-child>*{border-bottom:0}
.insight-table tbody tr>:first-child{color:var(--c-ink);font-weight:600}
.insight-table td strong{color:var(--c-ink);font-weight:600}
@media (max-width:767px){
  .insight-table-wrap{width:100%;overflow:visible;border:0;border-radius:0}
  .insight-table{min-width:0}
  .insight-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .insight-table,.insight-table tbody,.insight-table tr,.insight-table th,.insight-table td{display:block}
  .insight-table tr{padding:var(--sp-4);margin-bottom:var(--sp-3);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md)}
  .insight-table th,.insight-table td{padding:var(--sp-2) 0;border:0}
  .insight-table tbody tr>:first-child{padding-top:0;font:500 18px/1.3 var(--f-display)}
  .insight-table td:not(:first-child)::before{content:attr(data-label);display:block;font:600 11px/1.3 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-faint)}
}

.insight-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* boxed lists inside the article */
.insight-copybox,.c2b-policy{padding:var(--sp-5);background:var(--c-card);border:1px solid var(--c-border-strong);border-radius:var(--r-md)}
.c2b-policy{border-color:rgba(232,182,90,.35)}
.insight-copybox>*+*,.c2b-policy>*+*{margin-top:var(--sp-3)}
.c2b-policy h3{font-size:clamp(19px,18px + .3vw,22px)}

/* question style FAQ on details and summary; the city pages keep theirs inside the article */
.insight-faq{margin-top:var(--sp-9)}
.insight-faq>h2{font-size:clamp(26px,22px + 1.2vw,34px);margin-bottom:var(--sp-4)}
.insight-faq details,.insight-body>details{border-bottom:1px solid var(--c-border-strong)}
.insight-faq summary,.insight-body>details>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);min-height:56px;padding:var(--sp-3) 0;font:500 19px/1.3 var(--f-display);color:var(--c-ink)}
.insight-faq summary::-webkit-details-marker,.insight-body>details>summary::-webkit-details-marker{display:none}
.insight-faq summary::after,.insight-body>details>summary::after{content:"+";flex:none;font:400 28px/1 var(--f-body);color:var(--c-amber)}
.insight-faq details[open]>summary::after,.insight-body>details[open]>summary::after{content:"\2212"}
.insight-faq details p,.insight-body>details p{padding:0 var(--sp-6) var(--sp-5) 0;font-size:var(--fs-body);line-height:1.7}
.insight-faq details p a,.insight-body>details p a{overflow-wrap:anywhere}
.insight-body>details{margin-top:0}
.insight-body>h2+details{margin-top:var(--sp-3)}

/* sources and author box */
.insight-sources{margin-top:var(--sp-8);padding:var(--sp-5);border:1px solid var(--c-border);border-radius:var(--r-md)}
.insight-body>.insight-sources h2{margin:0 0 var(--sp-4);font-size:clamp(20px,18.5px + .4vw,23px)}
.insight-sources ul{padding-left:1.2em;list-style:disc;font-size:15px;line-height:1.6}
.insight-sources li+li{margin-top:var(--sp-3)}
.insight-sources li::marker{color:var(--c-amber)}
.insight-author{display:flex;gap:var(--sp-4);align-items:flex-start;margin-top:var(--sp-8);padding:var(--sp-5);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);font-size:15px;line-height:1.6}
.insight-author img{flex:none;width:72px;height:96px;object-fit:cover;border-radius:var(--r-sm)}
.insight-author p+p{margin-top:var(--sp-2)}
.insight-author-name{font:500 20px/1.2 var(--f-display);color:var(--c-ink)}
.insight-author-role{color:var(--c-ink)}
@media (max-width:479px){.insight-author{flex-direction:column}}

/* offer call to action. It also carries .cta-band so the sticky Book button stays out of its way. */
.insight-cta.cta-band{display:block;margin-top:var(--sp-9);padding:var(--sp-6)}
.insight-cta h3{font-size:clamp(22px,19.5px + .7vw,26px)}
.insight-cta p{margin-top:var(--sp-3);max-width:none}
.insight-cta-links{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.insight-cta-alt{font-size:var(--fs-small);color:var(--c-faint)}
.insight-cta p.insight-cta-alt{margin-top:var(--sp-4)}
.insight-cta p.insight-cta-snapshot{margin-top:var(--sp-2)}
@media (max-width:479px){.insight-cta-links .btn{width:100%}}

/* related links */
.insight-related{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--c-border-strong)}
.insight-related h3{font:600 var(--fs-eyebrow)/1.3 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-faint);margin-bottom:var(--sp-2)}
.insight-related a{display:flex;align-items:center;min-height:44px;padding:var(--sp-1) 0;color:var(--c-ink);text-decoration:none;border-bottom:1px solid var(--c-border)}
.insight-related a:hover{color:var(--c-amber);text-decoration:underline;text-underline-offset:.2em}

/* hub */
.insight-hub{padding-bottom:var(--sp-9)}
.insight-hub-head{padding:var(--sp-5) 0 0;max-width:52rem}
.insight-hub-entity{margin-top:var(--sp-5);color:var(--c-ink);font-size:var(--fs-lede);line-height:var(--lh-lede);max-width:40rem}
.insight-hub-desc{margin-top:var(--sp-3);max-width:40rem}
.insight-hub-nav{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.insight-hub-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--c-border-strong);color:var(--c-ink);font-size:15px;font-weight:500;text-decoration:none}
.insight-hub-nav a:hover{background:rgba(244,239,230,.06);color:var(--c-ink)}
.insight-start{margin-top:var(--sp-5);max-width:40rem}
.insight-group{margin-top:var(--sp-9);scroll-margin-top:80px}
.insight-group>h2{font-size:clamp(26px,22px + 1.2vw,34px)}
.insight-group-q{margin-top:var(--sp-2);font-size:var(--fs-lede);line-height:1.4}
.insight-grid{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
@media (min-width:768px){.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.insight-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.insight-card{display:grid;gap:var(--sp-2);align-content:start;padding:var(--sp-5);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);color:var(--c-body);text-decoration:none;transition:border-color var(--dur-1) var(--ease)}
.insight-card:hover{border-color:rgba(232,182,90,.5);color:var(--c-body)}
.insight-card-meta{font:600 12px/1.3 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-faint)}
.insight-card h3{font-size:clamp(20px,18.5px + .4vw,23px);line-height:1.25;overflow-wrap:anywhere}
.insight-card p{font-size:15px;line-height:1.55}
.insight-card-cta{margin-top:var(--sp-2);font:600 13px/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--c-amber)}
.insight-group-offer{margin-top:var(--sp-4);font-size:15px}
.insight-hub>.insight-cta{max-width:var(--reading)}