/* Hettie Ireland town pages and hub. Loaded after site.css; reuses its variables and classes. Mobile first. */

/* ---------- Breadcrumb in the dark hero ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 20px; font-size: 14px; color: var(--on-dark-2); }
.crumbs a { color: var(--on-dark); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--green); }
.page-hero h1 { overflow-wrap: break-word; }
.page-hero h1 .serif { overflow-wrap: anywhere; }

/* ---------- Local section ---------- */
.ie-local { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.ie-prose p { color: var(--ink); font-size: 17px; line-height: 1.65; max-width: 68ch; }
.ie-prose p + p { margin-top: 18px; }
.ie-glance { background: var(--white); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line-light); }
.ie-glance h3 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 14px; }
.ie-glance dl { margin: 0; display: grid; gap: 0; }
.ie-glance dl > div { padding: 12px 0; border-top: 1px solid var(--line-light); }
.ie-glance dl > div:first-child { border-top: 0; padding-top: 0; }
.ie-glance dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.ie-glance dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.ie-glance dd a { color: var(--green-deep); text-underline-offset: 3px; }
.ie-sources { margin-top: 30px; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 940px; overflow-wrap: anywhere; }
.ie-sources a { color: var(--green-deep); text-underline-offset: 3px; }
.light .ie-sources, .ie-sources { color: var(--muted); }

/* ---------- Module cards ---------- */
.ie-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ie-mod { background: var(--grey-card); display: flex; flex-direction: column; gap: 4px; }
.ie-mod .ie-price { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 14px; color: var(--green-deep); }
.ie-more { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--green-deep); text-underline-offset: 3px; }
.ie-mod:first-child .ie-more { color: var(--green); }
.ie-mod:first-child { background: var(--bg-dark); }
.ie-mod:first-child h3 { color: var(--green); }
.ie-mod:first-child p { color: var(--on-dark); }
.ie-mod:first-child .ie-price { color: var(--green); }

/* ---------- Local numbers ---------- */
.ie-numbers { padding: clamp(64px, 8vw, 104px) 0 clamp(52px, 6vw, 80px); }
.ie-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--line-dark); }
.ie-tile { padding: 28px 24px 8px 0; min-width: 0; }
.ie-tile + .ie-tile { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.ie-tile .indicator__value { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
.ie-tile p { font-size: 15.5px; max-width: 300px; }
.ie-numbers .indicators-note { overflow-wrap: anywhere; }

/* ---------- Nearby ---------- */
.ie-near { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ie-near a { display: block; height: 100%; background: var(--white); border-radius: 18px; padding: 18px 20px; text-decoration: none; border: 1px solid var(--line-light); transition: transform .15s ease, border-color .15s ease; }
.ie-near a:hover { transform: translateY(-2px); border-color: var(--green-deep); }
.ie-near b { display: block; font-size: 19px; font-weight: 600; color: var(--bg-dark); letter-spacing: -.01em; }
.ie-near span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.ie-also { margin-top: 22px; color: var(--ink); max-width: 900px; }
.ie-also a { color: var(--green-deep); text-underline-offset: 3px; }

/* ---------- Hub ---------- */
.ie-prov { font-family: var(--serif); font-style: italic; font-weight: 900; font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--green-deep); margin: 52px 0 18px; }
.ie-prov:first-of-type { margin-top: 0; }
.ie-counties { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ie-county { background: var(--grey-card); border-radius: 22px; padding: 22px; min-width: 0; }
.ie-county h4 { font-size: 19px; font-weight: 600; color: var(--bg-dark); letter-spacing: -.01em; }
.ie-fig { margin: 6px 0 12px; font-size: 14.5px; color: var(--ink-2); }
.ie-fig span { display: block; color: var(--muted); font-size: 13px; }
.ie-county ul { list-style: none; display: grid; gap: 2px; }
.ie-county li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-light); font-size: 16px; }
.ie-county li a { color: var(--green-deep); font-weight: 600; text-underline-offset: 3px; }
.ie-county li span { color: var(--muted); font-size: 14px; white-space: nowrap; }

@media (max-width: 960px) {
  .ie-local { grid-template-columns: minmax(0, 1fr); }
  .ie-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ie-tiles { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ie-tile, .ie-tile + .ie-tile { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line-dark); }
}
@media (max-width: 620px) {
  .ie-mods { grid-template-columns: minmax(0, 1fr); }
  .ie-prose p { font-size: 16.5px; }
}