/* Shared layout refinements.
 * Loaded before the visual revamp and field-guide sheets so those layers
 * keep winning the cascade, the same order previously used by runtime injection.
 */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.restaurant[hidden], .bakery[hidden], .cafe[hidden], .venue[hidden], .hairdresser[hidden] { display: none !important; }
#hero { height: min(54vh, 560px); min-height: 380px; }
#hero-card { max-width: min(860px, calc(100% - 2rem)); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.28); }
#hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.1; }
#info { margin-top: 2.25rem; margin-bottom: 1.5rem; }
#info p:first-child { font-weight: 500; }
#search-bar { max-width: 760px; margin-top: 1.25rem; margin-bottom: 0.75rem; }
#search { min-height: 46px; border: 1.5px solid var(--fg-line, rgba(26, 51, 43, 0.35)); background: transparent; color: var(--fg-ink, #1a332b); }
#search::placeholder { color: var(--fg-muted, #3c5248); opacity: 1; }
#search:focus { border-color: var(--fg-ink, #1a332b); box-shadow: none; }
#filter-section { max-width: 760px; margin: 0.75rem auto 1.25rem; padding: 1rem 1.25rem; border: 1px solid #dce8de; border-radius: 1rem; background: rgba(255, 255, 255, 0.82); box-shadow: 0 4px 16px rgba(44, 62, 80, 0.08); }
#filter-section .filter-container { justify-content: center; }
#filter-section .filter-group { min-width: 220px; }
#fixed-card { box-sizing: border-box; }
.img_container { width: 100%; height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0.65rem; background: var(--fg-paper, #f3efe4); border: 1px solid var(--fg-line, rgba(26, 51, 43, 0.16)); }
.img_container.media-square { width: min(100%, 280px); height: 280px; margin-left: auto; margin-right: auto; }
.img_container.media-portrait { width: min(100%, 230px); height: 280px; margin-left: auto; margin-right: auto; }
.img_container.media-wide { height: 180px; }
.img_container > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 270px; object-fit: contain; object-position: center; }
.filter-button { min-height: 38px; }
#restaurants, #bakeries, #cafes, #venues, #hairdressers { margin-top: 1.5rem; min-width: 0; }
.restaurant, .bakery, .cafe, .venue, .hairdresser { cursor: default; min-width: 0; box-sizing: border-box; border: 1px solid var(--fg-line, rgba(26, 51, 43, 0.16)); border-radius: var(--fg-radius, 14px); box-shadow: 0 1px 2px rgba(26, 51, 43, 0.04); }
.restaurant:hover, .bakery:hover, .cafe:hover, .venue:hover, .hairdresser:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(44, 62, 80, 0.13); }
.restaurant h2, .bakery h2, .cafe h2, .venue h2, .hairdresser h2 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.contact-buttons { margin-top: 1rem; padding-top: 0; min-width: 0; max-width: 100%; }
.contact-button { display: inline-flex; flex: 1 1 5.5rem; min-width: 5.5rem; max-width: 100%; min-height: 62px; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; box-sizing: border-box; padding: 0.55rem 0.45rem; line-height: 1.2; }
.contact-button i { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; text-align: center; line-height: 1; }
.contact-button > span { display: block; width: 100%; min-width: 0; text-align: center; overflow-wrap: break-word; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
.contact-button.detail-link { flex: 1 1 100%; flex-direction: row; min-height: 44px; width: 100%; max-width: 100%; padding: 0.55rem 0.75rem; box-sizing: border-box; }
.contact-button:first-child { flex: 1.6 1 9rem; min-width: min(8.75rem, 100%); max-width: 100%; }
.contact-button:first-child > span { font-size: 0.78rem; letter-spacing: -0.01em; }
.contact-button.detail-link > span { width: auto; }
.listing-status { max-width: 1200px; margin: 0 auto; padding: 0 1rem; text-align: center; }
.result-count { margin: 1rem 0 0; color: var(--fg-ink, #1a332b); font-weight: 650; }
.empty-state { margin: 1rem auto; padding: 1.25rem; border: 1px solid var(--fg-line, rgba(26, 51, 43, 0.16)); border-radius: 0.75rem; background: var(--fg-cream, #faf7f0); color: var(--fg-ink, #1a332b); }
.empty-state p { margin: 0 0 0.75rem; }
.reset-filters { border: 0; border-radius: 999px; padding: 0.6rem 1rem; background: var(--fg-ink, #1a332b); color: var(--fg-cream, #faf7f0); cursor: pointer; }
.reset-filters:hover, .reset-filters:focus-visible { background: #12261f; }
.filter-button:focus-visible, .contact-button:focus-visible, .detail-link:focus-visible, .reset-filters:focus-visible, .subpage-card:focus-visible { outline: 3px solid var(--fg-ink, #1a332b); outline-offset: 3px; }
.closed-badge { display: inline-block; margin-left: 0.4rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: #ececec; color: #666; font-family: var(--font-body, sans-serif); font-size: 0.7rem; font-weight: 500; vertical-align: middle; }
.detail-link { background: transparent; color: var(--fg-ink, #1a332b); border: 0; border-top: 1px solid var(--fg-line, rgba(26, 51, 43, 0.16)); }
.detail-link:hover { background: transparent; color: var(--fg-clay, #b04e2a); }
@media (max-width: 900px) {
  .contact-buttons { display: flex; flex-wrap: wrap; }
  .contact-button, .contact-button:first-child { flex: 1 1 calc(50% - 0.25rem); min-width: 0; max-width: 100%; }
  .contact-button:first-child { flex-basis: 100%; }
  .contact-button.detail-link { flex: 1 1 100%; width: 100%; max-width: 100%; }
}
@media (max-width: 600px) {
  #hero { height: auto; min-height: 390px; }
  #hero-card { width: calc(100% - 2rem); padding: 1.25rem; }
  #hero h1 { font-size: clamp(2rem, 10vw, 2.6rem); }
  #info { margin-top: 1.75rem; padding-left: 1rem; padding-right: 1rem; }
  #filter-section { margin-left: 1rem; margin-right: 1rem; padding: 0.85rem; }
  #filter-section .filter-group { min-width: 100%; }
  .filter-button { flex: 1 1 auto; }
  #fixed-header h1, #fixed-header .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #fixed-header > div { display: flex; align-items: center; width: 100%; height: 100%; min-width: 0; }
  #fixed-card { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; min-width: 0; }
  #mobile-nav-toggle { align-self: center; flex: 0 0 44px; margin-top: 0; margin-bottom: 0; }
}
@media (max-width: 768px) {
  #restaurants, #bakeries, #cafes, #venues, #hairdressers { grid-template-columns: minmax(0, 1fr) !important; width: 100%; box-sizing: border-box; }
}