@charset "utf-8";
/* CSS Document */
/* /assets/css/index-dev.css v1.0*/
/* Optional: ensure main has same width container */
main.page-width-wrap { }

/* === LAYOUT === */
.columns { display:flex; gap:16px; align-items:flex-start; }
.sidebar { flex:0 0 33.333%; min-width:260px; }
.news-col { flex:1 1 66.666%; min-width:0; }

/* === CARDS & TEXT === */
.tw7-card { background:#fff; border:1px solid #ddd; border-radius:10px; overflow:hidden; }
.tw7-pad { padding:12px 14px; }
.tw7-title { font-weight:600; font-size:1rem; margin:0 0 6px; line-height:1.25; }
.tw7-kicker { font-size:0.85rem; color:#505a5f; margin-bottom:4px; }
.tw7-meta { font-size:0.85rem; color:#666; }
.tw7-list { list-style:none; margin:0; padding:0; }
.tw7-list li { padding:8px 0; border-bottom:1px dashed #eee; font-size:0.95rem; }

/* === TABLES & BADGES === */
.tw7-table { width:100%; border-collapse:collapse; font-size:0.95rem; }
.tw7-table th, .tw7-table td { border-bottom:1px solid #eee; padding:8px 6px; text-align:left; vertical-align:top; }
.tw7-table th { background:#fafafa; font-weight:600; }
.tw7-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.8rem; font-weight:700; color:#000; }
.sev-1 { background:#d4351c; color:#fff; }
.sev-2 { background:#ffbf47; }
.sev-3 { background:#fff1a3; }
.sev-4 { background:#d0d0d0; }
.tw7-sub { font-size:0.95rem; margin:8px 0 6px; color:#444; }

/* === HERO === */
.hero { background:#f3f2f1; border:1px solid #ddd; border-radius:10px; padding:12px; margin-bottom:8px; }
.hero.hero-primary   { border:2px solid #333; }
.hero.hero-secondary { border:2px solid #666; }
.hero-primary .hero-card   { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
.hero-secondary .hero-card { display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:start; }
.hero-img { width:100%; height:auto; display:block; border-radius:10px; }
.hero-card .hero-img { position:static !important; z-index:0; }
.hero-card .tw7-pad  { position:relative; z-index:1; }

/* === AGGREGATED (base) === */
.agg-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.agg-card { display:grid; grid-template-rows:1fr 1fr; height:clamp(320px, 36vw, 420px); }
.agg-card.no-img { grid-template-rows:auto; height:auto; }
.agg-img-wrap { position:relative; overflow:hidden; }
.agg-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; background:#eaeaea; }
.agg-card .tw7-pad { overflow:hidden; }
.agg-card .tw7-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.agg-card .desc      { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

.agg-card { border-color: var(--src-border, #000); background: var(--src-bg, #fff); color: var(--src-text, #000); }
.agg-card a, .agg-card .tw7-kicker, .agg-card .tw7-meta { color: inherit; }

/* === Duo rows for text-only items === */
.news-duo { grid-column: 1 / -1; display:grid; grid-template-columns:1fr; gap:16px; }
.news-mini .tw7-title { font-size:0.95rem; margin-bottom:4px; }
.news-mini .desc { font-size:0.95rem; line-height:1.35; }
.news-mini.empty { visibility:hidden; }

/* === Responsive === */
@media (max-width:980px) {
  .columns { flex-direction:column; }
  .sidebar, .news-col { flex:1 1 auto; width:100%; }
  .hero-primary .hero-card,
  .hero-secondary .hero-card { grid-template-columns:1fr; }
  .agg-grid { grid-template-columns:1fr; }
  .agg-card { height:auto; grid-template-rows:auto auto; }
  .news-duo { grid-column:auto; grid-template-columns:1fr; }
}
@media (min-width:720px) {
  .news-duo { grid-template-columns:1fr 1fr; }
}

/* === Edition bar === */
.edition-bar {
  background:#f3f3f3; border:1px solid #e2e2e2; border-radius:6px;
  padding:6px 10px; margin:8px 0 16px; font-size:0.95rem; color:#444;
}

/* === Sidebar tweaks === */
.sidebar .tw7-card { padding: calc(2mm + 12px); border: 1px solid #a853b3; }
.sidebar .tw7-card + .tw7-card { margin-top: 3mm; }
.sidebar .tw7-card.personal-box { border-color:#333; border-width:3px; }

/* Weather */
.tw7-weather { font-size:.95rem }
.tw7-weather ul { list-style:none; margin:8px 0 0; padding:0 }
.tw7-weather li { margin:4px 0 }
.ww-current { display:flex; align-items:center; gap:.5rem; font-size:1rem; }
.ww-icon svg { width:26px; height:26px; vertical-align:middle }
.ww-days strong { font-weight:700 }
.ww-more { margin-top:.25rem }
.ww-panel { padding:.5rem 0 }
#ww-spark { width:100%; height:auto; display:block; }
.ww-hourly { display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:.25rem .75rem; margin-top:.5rem }
.ww-foot { color:#666; font-size:.85rem; margin-top:6px }
#weather-widget .ww-icon svg { width:26px; height:26px; vertical-align:middle; }
#weather-widget .ww-days li { display:flex; align-items:center; gap:.5rem; }
#weather-widget .ww-days li .ww-ico { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 20px; }
#weather-widget .ww-days li .ww-ico svg { width:20px; height:20px; display:block; }
#weather-widget svg { max-width:none !important; }

/* === Road Works widget === */
#rw-widget .controls { display:flex; gap:.5rem; align-items:center; margin:6px 0 8px; }
#rw-widget .rw-list { display:flex; flex-direction:column; gap:10px; }
#rw-widget .rw-item { border:1px solid #e5e5e5; border-radius:10px; padding:10px; background:#fff; }
#rw-widget .rw-row { display:flex; justify-content:space-between; gap:10px; }
#rw-widget .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; background:#eef; border:1px solid #ccd; }
#rw-widget .badge-red { background:#fbe3e3; border-color:#f2bcbc; color:#9b1c1c; }
#rw-widget .meta { color:#555; font-size:.9rem; }
#rw-widget .map { height:220px; border-radius:8px; border:1px solid #ddd; margin-top:6px; }
#rw-widget .rw-extra { margin-top:8px; }

.tw7-btn-link {
  background:none; border:none; padding:0 4px; font:inherit; color:#1d70b8; cursor:pointer;
}
.tw7-btn-link:hover { text-decoration:underline; }

/* === Ads emphasis === */
.tw7-card--ad { border:2px solid #0b0c0c; }
.tw7-card--ad1 { box-shadow: inset 0 0 0 2px #0b0c0c; }
.tw7-card--ad .tw7-meta::after { content:" · Advertisement"; font-weight:600; }

/* Road Works: show only ~3 items tall, scroll for the rest */
#rw-widget .rw-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* each collapsed card is ~130–150px; tune to your UI */
  max-height: 140px;     /* ≈ 3 cards visible */
  overflow-y: auto;
  padding-right: 4px;    /* space for scrollbar */
}

/* Give cards a minimum height so “3 items” visual stays consistent */
#rw-widget .rw-item { min-height: 130px; }

/* Warning badge for “Starts tomorrow” */
#rw-widget .badge-warn {
  background: #fff3cd;
  border: 1px solid #f0d98c;
  color: #795000;
}
/* === Floods (Environment Agency) === */
#floods-widget .f-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 360px;  /* ~2–3 items visible */
  overflow-y:auto;
  padding-right:4px;
}
#floods-widget .f-item {
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:10px;
  background:#fff;
}
#floods-widget .f-row { display:flex; justify-content:space-between; gap:10px; }
#floods-widget .f-title { display:flex; align-items:center; gap:8px; }
#floods-widget .tw7-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; font-weight:700; color:#000; }
#floods-widget .meta { color:#555; font-size:.9rem; margin-top:4px; }
/* === Services Alerts scroll wrappers === */
#services-alerts .alerts-scroll {
  max-height: 240px;     /* ≈ 2–3 items visible; tweak as needed */
  overflow-y: auto;
  padding-right: 4px;    /* room for scrollbar */
}

/* Optional: make table rows a tad tighter inside scroll */
#services-alerts .alerts-scroll .tw7-table th,
#services-alerts .alerts-scroll .tw7-table td {
  padding: 6px 6px;
}
/* Weather widget micro styles */
.tw7-weather .ww-current { display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.tw7-weather .ww-days { list-style:none; padding:0; margin:.25rem 0 .5rem; display:grid; grid-template-columns:repeat(5,1fr); gap:.25rem; }
.tw7-weather .ww-day { display:grid; grid-template-columns: auto 1.6em 1fr auto; align-items:center; gap:.4rem; padding:.25rem .4rem; border-radius:.4rem; }
.tw7-weather .ww-hourly { list-style:none; padding:0; margin:.5rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; }
.tw7-weather .ww-hr { display:grid; grid-template-columns: 4.5rem 1.6em auto auto; align-items:center; gap:.4rem; padding:.25rem .4rem; border-radius:.4rem; }
.tw7-weather .ww-foot { font-size:.85rem; opacity:.7; margin-top:.5rem; }

/* Horizontal scroll for daily forecast */
.tw7-weather .ww-days {
  list-style: none;
  padding: 0;
  margin: .25rem 0 .5rem;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tw7-weather .ww-day {
  flex: 0 0 120px;           /* each tile width */
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: auto 1.6em;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "w i"
    "t t"
    "p p";
  align-items: center;
  gap: .25rem .4rem;
  padding: .4rem .5rem;
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.tw7-weather .ww-day:focus { outline: 2px solid #1d70b8; outline-offset: 2px; }
.tw7-weather .ww-day .d-w { grid-area: w; font-weight: 600; }
.tw7-weather .ww-day .d-i { grid-area: i; text-align: right; }
.tw7-weather .ww-day .d-t { grid-area: t; font-variant-numeric: tabular-nums; }
.tw7-weather .ww-day .d-p { grid-area: p; opacity: .75; font-size: .9em; }

/* Tiny scroll buttons that only show when needed */
.tw7-weather .ww-scroll-ctr {
  display: inline-flex;
  gap: .25rem;
  margin-left: .5rem;
  vertical-align: middle;
}
.tw7-weather .ww-scroll-btn {
  display: none;                /* shown via JS if overflow */
  align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: .4rem; border: 1px solid rgba(0,0,0,.1);
  background: white; cursor: pointer;
  font-size: 1rem; line-height: 1rem;
}
.tw7-weather .ww-scroll-btn:hover { background: #f3f3f3; }
/* Header width independent of .page-width */
:root { --page-max-width: 1200px; } /* already present, but safe */
.tw7-header__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 12px;
}