/* Hierarchy hubs reuse the approved town typography, cards and wave dividers.
   Every addition is scoped so town/city and Sobi search layouts stay unchanged. */
.tc-area-page .tc-area-hero { min-height: 600px; padding: 170px 0 135px; background: #c8e5d8; }
.tc-area-page .tc-area-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; z-index: 2; }
.tc-area-page .tc-area-hero__copy { min-width: 0; }
.tc-area-page .tc-area-hero__copy h1 { overflow-wrap: anywhere; }
.tc-area-page .tc-area-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 28px; }
.tc-area-page .tc-area-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 13px 23px; border-radius: 28px; background: var(--tc-accent); color: #fff; font-size: 14px; line-height: 1.6; }
.tc-area-page .tc-area-button:hover { background: #2b7882; }
.tc-area-page .tc-area-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--tc-accent); font-size: 14px; }
.tc-area-page .tc-area-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.tc-area-page .tc-area-hero__actions .tc-town-icon { width: 18px; height: 18px; }
.tc-area-page .tc-area-hero-places { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(2, minmax(0, 165px)); gap: 14px; min-width: 0; }
.tc-area-page .tc-area-hero-places > a { position: relative; min-width: 0; overflow: hidden; border-radius: 18px; background: #11545c; color: #fff; }
.tc-area-page .tc-area-hero-places > a:first-child { grid-row: 1 / -1; }
.tc-area-page .tc-area-hero-places[data-count="1"] { grid-template-columns: 1fr; }
.tc-area-page .tc-area-hero-places[data-count="2"] > a { grid-row: 1 / -1; }
.tc-area-page .tc-area-hero-places img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-area-page .tc-area-hero-places > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(9,45,49,.85)); pointer-events: none; }
.tc-area-page .tc-area-hero-places > a > span { position: absolute; left: 20px; right: 45px; bottom: 20px; z-index: 1; }
.tc-area-page .tc-area-hero-places small { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.tc-area-page .tc-area-hero-places strong { display: block; font-size: 22px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.tc-area-page .tc-area-hero-places > a > .tc-town-icon { position: absolute; right: 17px; bottom: 24px; width: 18px; height: 18px; z-index: 1; }
.tc-area-page .tc-area-hero-places > a:focus-visible { outline-offset: -4px; outline-color: #fff !important; }
.tc-area-page .tc-area-hero-guide { padding: 30px; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: rgba(255,255,255,.38); }
.tc-area-page .tc-area-hero-guide__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; background: #deeee4; color: var(--tc-accent); }
.tc-area-page .tc-area-hero-guide h2 { font-size: 27px; }
.tc-area-page .tc-area-hero-guide p { margin: 14px 0 20px; color: var(--tc-muted); }
.tc-area-page .tc-area-hero-guide > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--tc-line); }
.tc-area-page .tc-area-section-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--tc-line); font-size: 13px; }
.tc-area-page .tc-area-section-nav > span { margin-right: auto; padding-right: 15px; font-size: 15px; }
.tc-area-page .tc-area-section-nav a { padding: 7px 14px; border-radius: 24px; background: rgba(255,255,255,.6); }
.tc-area-page .tc-area-section-nav a:hover { background: #fff; }
.tc-area-page .tc-area-about { padding: 50px 0 135px; }
.tc-area-page .tc-area-about__layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; }
.tc-area-page .tc-area-about__layout .tc-town-about__copy { margin-top: 0; }
.tc-area-page .tc-area-overview { display: flex; flex-wrap: wrap; gap: 24px 0; margin-top: 36px; padding: 26px 12px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: rgba(255,255,255,.45); }
.tc-area-page .tc-area-overview > div { flex: 1 1 180px; min-width: 0; padding: 0 20px; text-align: center; }
.tc-area-page .tc-area-overview > div + div { border-left: 1px solid var(--tc-line); }
.tc-area-page .tc-area-overview strong { display: block; font-size: 34px; line-height: 1.2; font-weight: 400; }
.tc-area-page .tc-area-overview span { display: block; margin-top: 8px; font-size: 13px; color: var(--tc-muted); }
.tc-area-page .tc-area-band--places { --tc-band: #c8e5d8; }
.tc-area-page .tc-area-band--featured { --tc-band: #e7f0ea; }
.tc-area-page .tc-area-band--towns { --tc-band: #deeee4; }
.tc-area-page .tc-area-band--groups { --tc-band: #e7f0ea; }
.tc-area-page .tc-area-band--latest { --tc-band: #c8e5d8; }
.tc-area-page .tc-area-band--guide { --tc-band: #deeee4; padding-bottom: 60px; }
.tc-area-page [id] { scroll-margin-top: 35px; }
.tc-area-page .tc-area-region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tc-area-page .tc-area-region-card { min-width: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 16px; background: rgba(255,255,255,.67); }
.tc-area-page .tc-area-region-card > a { display: flex; flex-direction: column; height: 100%; padding: 26px; border-radius: inherit; }
.tc-area-page .tc-area-region-card:hover { background: #fff; }
.tc-area-page .tc-area-region-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--tc-accent); }
.tc-area-page .tc-area-region-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #deeee4; }
.tc-area-page .tc-area-region-card__kind { flex: 1; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.tc-area-page .tc-area-region-card__top > .tc-town-icon { width: 18px; height: 18px; }
.tc-area-page .tc-area-region-card h3 { font-size: 26px; overflow-wrap: anywhere; }
.tc-area-page .tc-area-region-card p { margin: 12px 0 20px; color: var(--tc-muted); font-size: 15px; }
.tc-area-page .tc-area-region-card__count { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tc-line); font-size: 12px; color: var(--tc-accent); }
.tc-area-page .tc-area-place-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tc-area-page .tc-area-place-card { min-width: 0; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(9,45,49,.05); }
.tc-area-page .tc-area-place-card > a { display: flex; flex-direction: column; height: 100%; }
.tc-area-page .tc-area-place-card > a:focus-visible { outline-offset: -4px; }
.tc-area-page .tc-area-place-card__image { aspect-ratio: 1.7; overflow: hidden; background: #c8e5d8; }
.tc-area-page .tc-area-place-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-area-page .tc-area-place-card__image--empty { display: grid; place-items: center; background: linear-gradient(135deg, #c8e5d8, #e7f0ea); }
.tc-area-page .tc-area-place-card__image--empty .tc-town-icon { width: 48px; height: 48px; color: #438078; }
.tc-area-page .tc-area-place-card__body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.tc-area-page .tc-area-place-card__eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #438078; }
.tc-area-page .tc-area-place-card h3 { font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
.tc-area-page .tc-area-place-card p { margin: 12px 0 20px; color: var(--tc-muted); font-size: 15px; line-height: 1.6; }
.tc-area-page .tc-area-place-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tc-line); color: var(--tc-accent); font-size: 13px; }
.tc-area-page .tc-area-place-card__link .tc-town-icon { width: 18px; height: 18px; }
.tc-area-page .tc-area-more { margin-top: 25px; }
.tc-area-page .tc-area-more summary { width: fit-content; max-width: 100%; padding: 12px 20px; border: 1px solid rgba(17,84,92,.22); border-radius: 25px; cursor: pointer; color: var(--tc-accent); font-size: 14px; }
.tc-area-page .tc-area-more[open] summary { margin-bottom: 24px; }
.tc-area-page .tc-area-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.tc-area-page .tc-area-guide p { margin: 18px 0 0; color: var(--tc-muted); }
.tc-area-page .tc-area-guide__steps { display: grid; gap: 14px; }
.tc-area-page .tc-area-guide__steps a { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 15px; background: rgba(255,255,255,.6); }
.tc-area-page .tc-area-guide__steps a > span { font-size: 22px; color: #438078; }
.tc-area-page .tc-area-guide__steps a > div { flex: 1; min-width: 0; }
.tc-area-page .tc-area-guide__steps strong { display: block; font-size: 18px; font-weight: 400; line-height: 1.4; }
.tc-area-page .tc-area-guide__steps small { display: block; margin-top: 5px; font-size: 13px; color: var(--tc-muted); }
.tc-area-page .tc-area-debug { margin: 24px 0; }
.tc-area-page .tc-area-debug pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    .tc-area-page .tc-area-hero__inner, .tc-area-page .tc-area-about__layout, .tc-area-page .tc-area-guide { gap: 32px; }
    .tc-area-page .tc-area-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-area-page .tc-area-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-area-page .tc-area-hero-places { grid-template-rows: repeat(2, minmax(0, 150px)); }
    .tc-area-page .tc-area-hero-places > a > span { left: 14px; bottom: 16px; }
    .tc-area-page .tc-area-hero-places strong { font-size: 19px; }
}
@media (max-width: 800px) {
    .tc-area-page .tc-area-hero { padding-top: 150px; }
    .tc-area-page .tc-area-hero__inner, .tc-area-page .tc-area-about__layout, .tc-area-page .tc-area-guide { grid-template-columns: 1fr; }
    .tc-area-page .tc-area-hero-places { grid-template-rows: repeat(2, minmax(0, 130px)); }
    .tc-area-page .tc-area-section-nav > span { flex-basis: 100%; }
    .tc-area-page .tc-area-overview > div { flex-basis: 50%; }
    .tc-area-page .tc-area-overview > div:nth-child(odd) { border-left: 0; }
}
@media (max-width: 575px) {
    .tc-area-page .tc-area-hero { min-height: 0; padding: 135px 0 95px; }
    .tc-area-page .tc-area-hero__inner { gap: 28px; }
    .tc-area-page .tc-area-hero-places { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 110px)); gap: 10px; }
    .tc-area-page .tc-area-hero-places > a > span { left: 12px; right: 12px; bottom: 14px; }
    .tc-area-page .tc-area-hero-places > a > .tc-town-icon { display: none; }
    .tc-area-page .tc-area-hero-places strong { font-size: 18px; }
    .tc-area-page .tc-area-hero-guide { padding: 24px; }
    .tc-area-page .tc-area-about { padding: 30px 0 95px; }
    .tc-area-page .tc-area-overview { margin-top: 26px; padding: 22px 0; }
    .tc-area-page .tc-area-overview > div { padding: 0 12px; }
    .tc-area-page .tc-area-overview strong { font-size: 29px; }
    .tc-area-page .tc-area-overview span { font-size: 12px; }
    .tc-area-page .tc-area-region-grid, .tc-area-page .tc-area-place-grid { grid-template-columns: 1fr; gap: 16px; }
    .tc-area-page .tc-area-region-card > a { padding: 22px; }
    .tc-area-page .tc-area-region-card h3 { font-size: 24px; }
    .tc-area-page .tc-area-guide__steps a { padding: 18px; gap: 12px; }
    .tc-area-page .tc-area-band--guide { padding-bottom: 36px; }
}

/* Optional area editor content and FAQs retain the existing type scale. */
.tc-area-page .tc-area-guide--faqs { align-items: start; }
.tc-area-page .tc-town-hero__intro { white-space: pre-line; }
.tc-area-page .tc-area-guide .tc-town-faqs h3 { font-size: 20px; }
.tc-area-page .tc-area-guide .tc-town-faqs__answer p { margin: 0 0 12px; }