/* Life in Abruzzo — "What's On" listings widget
   Namespaced under .whatson so it won't collide with Kadence styles.
   House style: square corners, thin --wo-line border, no drop shadows —
   matching the site's GeoDirectory listing cards. */
.whatson{
  /* ============================================================
     BRAND VARIABLES — set these to the Life in Abruzzo palette.
     (Placeholders below are a sage-green first pass — replace the
     hexes with your exact brand values, or map them to Kadence
     globals, e.g. --wo-brand: var(--global-palette1);)
     ============================================================ */
  /* These map straight onto the Life in Abruzzo theme tokens (defined in
     style.css), with safe fallbacks — so the widget matches the masthead
     automatically. Override a fallback only if you want to. */
  --wo-brand: var(--moss, #4a6741);            /* moss green — active filters, dates, accents */
  --wo-brand-dark: var(--moss-dark, #2e4029);  /* forest green — hovers, selected-week text */
  --wo-sage: #c1d9bc;                          /* brand sage band — selected week */
  --wo-ink: var(--ink, #1a1a18);               /* headings / strong text */
  --wo-body-ink: var(--ink-mid, #3d3d3a);      /* body copy */
  --wo-soft: var(--ink-soft, #6b6b66);         /* muted labels */
  --wo-paper: var(--paper, #faf9f6);           /* site ivory */
  --wo-card: #ffffff;
  --wo-line: var(--rule, #d8d5cc);
  /* Fonts follow the theme exactly */
  --wo-head-font: var(--serif, "Playfair Display", Georgia, serif);      /* headings */
  --wo-body-font: var(--body-serif, "Source Serif 4", Georgia, serif);   /* card copy */
  --wo-ui-font:   var(--sans, "DM Sans", system-ui, sans-serif);         /* chips / labels / dates */
  --wo-accent: var(--wo-brand);
  font-family:var(--wo-ui-font);color:var(--wo-ink);}
.whatson *{box-sizing:border-box;}
/* Optional hero/splash cover: full-width photo with the month title over a
   soft dark scrim. Square corners to match the site. */
.whatson .wo-hero{position:relative;width:100%;height:340px;margin:0 0 16px;background-size:cover;
  background-position:center;display:flex;align-items:flex-end;border:1px solid var(--wo-line);}
.whatson .wo-hero-inner{padding:24px 26px;max-width:80%;}
.whatson .wo-hero h2{font-family:var(--wo-head-font);color:#fff;font-size:40px;line-height:1.04;
  margin:0 0 6px;font-weight:700;text-shadow:0 1px 14px rgba(0,0,0,.4);}
.whatson .wo-hero p{margin:0;color:rgba(255,255,255,.94);font-size:15px;font-family:var(--wo-ui-font);
  text-shadow:0 1px 10px rgba(0,0,0,.45);}
@media (max-width:560px){
  .whatson .wo-hero{height:220px;}
  .whatson .wo-hero-inner{padding:16px 18px;max-width:100%;}
  .whatson .wo-hero h2{font-size:27px;}
  .whatson .wo-hero p{font-size:13.5px;}
}
.whatson .wo-head{margin:0 0 6px;}
.whatson .wo-head h2{font-family:var(--wo-head-font);font-size:28px;margin:0 0 4px;font-weight:600;color:var(--wo-ink);}
.whatson .wo-head p{margin:0;color:var(--wo-soft);font-size:14px;}
.whatson .wo-cal{display:inline-block;margin-top:8px;background:var(--wo-accent);color:#fff;
  text-decoration:none;font-size:13px;font-weight:600;padding:7px 14px;border-radius:0;}
.whatson .wo-cal:hover{background:var(--wo-brand-dark);}
.whatson .wo-bar{position:sticky;top:0;z-index:5;background:rgba(251,247,240,.97);
  border-bottom:1px solid var(--wo-line);padding:12px 0 8px;margin-bottom:14px;}
.whatson .wo-row{position:relative;display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:8px;padding-left:66px;}
.whatson .wo-lbl{position:absolute;left:0;top:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--wo-brand-dark);margin:0;}
.whatson .wo-chip{border:1px solid var(--wo-line);background:#fff;color:var(--wo-ink);padding:6px 12px;
  border-radius:0;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:.15s;white-space:nowrap;line-height:1.2;}
.whatson .wo-chip:hover{border-color:var(--wo-accent);}
.whatson .wo-chip.is-active{background:var(--wo-accent);color:#fff;border-color:var(--wo-accent);}
.whatson .wo-chip i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.whatson .wo-chip.is-active i{outline:1px solid #fff;}
.whatson .wo-weeks{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;}
.whatson .wo-weeks::-webkit-scrollbar{height:6px;}
.whatson .wo-weeks::-webkit-scrollbar-thumb{background:var(--wo-line);border-radius:0;}
.whatson .wo-weeks .wo-chip.is-active{background:var(--wo-sage);border-color:var(--wo-sage);color:var(--wo-brand-dark);}
.whatson .wo-view{margin-left:auto;display:flex;gap:6px;}
.whatson .wo-view .wo-chip.is-active{background:var(--wo-ink);border-color:var(--wo-ink);}
.whatson .wo-search{flex:1;min-width:150px;display:flex;justify-content:flex-end;}
.whatson .wo-search input{width:min(240px,100%);padding:8px 12px;border:1px solid var(--wo-line);border-radius:0;font-size:14px;}
.whatson .wo-count{font-size:12.5px;color:var(--wo-soft);}
/* Sage house-style band, two columns: the category name large in dark green on
   the left, the whole category image as a small thumbnail (contained, never
   cropped) on the right. Square corners, no shadow — matches the site. */
.whatson .wo-catbanner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:132px;margin:0 0 14px;border:1px solid var(--wo-line);border-radius:0;overflow:hidden;
  background:var(--wo-sage);padding:0 24px;}
.whatson .wo-cb-label{flex:1 1 auto;color:var(--wo-brand-dark);font-family:var(--wo-head-font);
  font-size:30px;font-weight:700;line-height:1.06;}
.whatson .wo-cb-thumb{flex:0 0 auto;width:178px;height:102px;object-fit:contain;background:transparent;}
.whatson .wo-cb-note{position:absolute;left:24px;bottom:9px;z-index:2;color:var(--wo-brand-dark);opacity:.7;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--wo-ui-font);}
@media (max-width:560px){
  .whatson .wo-catbanner{gap:14px;padding:0 16px;height:118px;}
  .whatson .wo-cb-thumb{width:132px;height:84px;}
  .whatson .wo-cb-label{font-size:22px;}
}
/* Standing "what's coming up" note, shown whenever the Cinema filter is
   active — alongside results if there are any, not only when the filter
   comes up empty. Square corners and a left accent bar, matching the
   house style rather than reading as a warning/error state. */
.whatson .wo-festival-note{
  display:none; /* toggled by JS */
  margin:0 0 16px;
  padding:12px 20px;
  background:var(--wo-sage);
  border:1px solid var(--wo-line);
  border-left:4px solid var(--wo-brand-dark);
  border-radius:0;
  font-family:var(--wo-ui-font);
  font-size:13.5px;
  line-height:1.5;
  color:var(--wo-brand-dark);
}
.whatson .wo-festival-note a{color:var(--wo-brand-dark) !important;font-weight:700;text-decoration:underline !important;}
.whatson .wo-festival-note a:hover{color:var(--wo-brand) !important;}
@media (max-width:560px){
  .whatson .wo-festival-note{padding:10px 16px;font-size:12.5px;}
}
.whatson .wo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:18px;margin-top:16px;}
.whatson .wo-divider{grid-column:1/-1;font-family:var(--wo-head-font);font-size:20px;color:var(--wo-accent);
  border-bottom:2px solid var(--wo-line);padding:8px 2px 6px;margin-top:8px;}
.whatson .wo-divider:first-child{margin-top:0;}
.whatson .wo-card{background:var(--wo-card);border:1px solid var(--wo-line);border-radius:0;
  padding:19px 20px 22px;box-shadow:none;display:flex;flex-direction:column;}
.whatson .wo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;}
.whatson .wo-date{font-weight:700;color:var(--wo-accent);font-size:13px;}
.whatson .wo-areapill{font-size:11px;color:var(--wo-brand-dark);background:var(--wo-sage);border:1px solid var(--wo-sage);border-radius:0;padding:2px 10px;white-space:nowrap;font-weight:600;}
.whatson .wo-card h3{font-family:var(--wo-head-font);font-size:18px;margin:0 0 11px;line-height:1.32;color:var(--wo-ink);}
/* Title reads as a heading, not a themed link: no green, no underline, upright.
   !important because the theme styles in-content links strongly. */
.whatson .wo-card h3 .wo-titlelink{color:inherit !important;text-decoration:none !important;font-style:normal !important;}
.whatson .wo-card h3 .wo-titlelink:hover{color:var(--wo-accent) !important;text-decoration:underline !important;}
.whatson .wo-tag{align-self:flex-start;color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:0;margin-bottom:13px;}
.whatson .wo-card p{margin:0;font-family:var(--wo-body-font);font-size:14.5px;line-height:1.62;color:var(--wo-body-ink);}
/* !important guards against theme link styles overriding size/italic/colour. */
.whatson .wo-more{margin-top:16px !important;align-self:flex-start;font-family:var(--wo-body-font) !important;
  font-size:14px !important;font-style:italic !important;font-weight:600 !important;
  color:var(--wo-brand-dark) !important;text-decoration:none !important;line-height:1.3 !important;}
.whatson .wo-more:hover{text-decoration:underline !important;}
.whatson .wo-empty{text-align:center;color:var(--wo-soft);padding:36px 0;display:none;}
@media(max-width:560px){.whatson .wo-row{padding-left:0;}.whatson .wo-lbl{position:static;min-width:100%;margin-bottom:2px;}.whatson .wo-view{margin-left:0;}}

/* Optional per-event photo thumbnail (e.image in the JSON). Bleeds to the
   card's edges above the existing padded content, matching the square-corner,
   no-shadow house style. Cards without an image are unaffected. */
.whatson .wo-card-has-img{padding-top:0;}
.whatson .wo-thumb{
  margin:0 -20px 14px;
  width:calc(100% + 40px);
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--wo-sage);
}
.whatson .wo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}