html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* Page layout variables and shared container to keep left/right gutters consistent */
:root {
  --page-max-width: 1100px;
  --page-gutter: 1rem; /* left/right padding for page content */
}

/* Reusable page container used by place detail and other full-width sections */
.page-container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  width: calc(100% - (var(--page-gutter) * 2));
}

body {
  margin-bottom: 0;
  /* Remove reserved padding for fixed footer; footer is not fixed and participates in document flow */
}

/* Footer styles aligned with PrayDigital.Shared footer */
.app-footer {
  background: linear-gradient(135deg, #2c5f2d, #4a7c59);
  color: white;
  padding: 2rem 1.5rem;
  margin-top: auto;
  border-radius: 0;
  width: 100%;
  height: auto;
  position: static;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-section {
  text-align: center;
}

.footer-text {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Build marker, deliberately tiny: it exists to compare builds across platforms, not to be read. */
.footer-version {
  margin: 0.35rem 0 0;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin: 0;
}

.footer-link:hover {
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

.footer-separator {
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
}

/* Store links for the platform apps. Icon + platform name, so the row reads without colour. */
.footer-apps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-apps-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  margin-right: 0.15rem;
}

.footer-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: white;
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.footer-app-link:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-app-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-section {
    text-align: left;
  }

  .footer-links {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .app-footer {
    padding: 1.5rem 1rem;
  }
}

/* Nearest mosques: ensure no horizontal padding on desktop or mobile so grid uses full width */
.nearest-places-section { padding-left: 0; padding-right: 0; }
@media (max-width: 700px) {
    .nearest-places-section .places-grid { gap: .75rem; }
}

/* Placeholder link inside mosque card: show pointer and hover affordance */
.place-card-placeholder .placeholder-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.place-card-placeholder .placeholder-link:hover {
    background: rgba(0,0,0,0.02);
    transform: translateY(-2px);
}
.place-card-placeholder .placeholder-link:focus {
    outline: 2px solid rgba(74,124,89,0.25);
    outline-offset: 2px;
}

/* Place detail layout: schedule left, contact info right */
.two-column-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.schedule-card { min-width: 0; }
.contact-card { min-width: 0; }

/* Four-column schedule table used on place detail */
.schedule-table-four-column {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .55rem;
    background: transparent;
}

.schedule-table-four-column thead th {
    text-transform: uppercase;
    font-weight: 600;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e9ecef;
}

.schedule-table-four-column td {
    padding: .35rem .7rem;
    border: none;
    vertical-align: middle;
}

.schedule-table-four-column .prayer-name {
    text-align: left;
}

.schedule-table-four-column .prayer-chip {
    display: inline-block;
    width: 96px;
    padding: .58rem .9rem;
    border-radius: 4px;
    background: #edf2ee;
    color: #3f5a4f;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    text-align: center;
}

.schedule-table-four-column .prayer-time {
    text-align: right;
}

.schedule-table-four-column .prayer-time-value {
    display: inline-block;
    min-width: 92px;
    color: #2c5f2d;
    font-weight: 700;
    font-family: monospace;
    text-align: right;
}

/* Make the full-size prayer times table match the compact mosque card schedule
   visual style: individual rows appear as cards with subtle radius/shadow and
   the same typography/colors used in place-card schedule. */
.schedule-card .schedule-table-four-column {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.55rem;
  background: transparent;
}

.schedule-card .schedule-table-four-column tbody tr {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}

.schedule-card .schedule-table-four-column tbody tr:nth-child(even) {
  background: #fdfefd;
}
.schedule-card .schedule-table-four-column thead { display: none; }
.schedule-card .schedule-table-four-column .prayer-name { text-align: left; }
.schedule-card .schedule-table-four-column .prayer-time { text-align: right; }

/* Similar mosques grid spacing: add top/bottom spacing around the whole section */
.similar-mosques-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.similar-mosques-section h2 {
    margin-bottom: .9rem;
}

/* Similar mosques grid: 2 cards per row on medium+ screens */
.similar-mosques-section .places-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 700px) {
    .similar-mosques-section .places-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Country places grid: 2 cards per row on medium+ screens */
.places-grid.country-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 700px) {
    .places-grid.country-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .similar-mosques-section {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .schedule-card .schedule-times {
        grid-template-columns: .9fr 1.1fr;
        gap: .4rem;
    }

    .place-card-schedule .schedule-times {
        grid-template-columns: 1fr 1fr;
        gap: .4rem;
    }

    .schedule-card .schedule-item,
    .place-card-schedule .schedule-item {
        gap: .3rem;
        padding: .4rem .5rem;
    }

    .schedule-card .schedule-times .schedule-item:nth-child(odd) .prayer-name {
        flex: 0 0 44px;
        max-width: 44px;
        font-size: .8rem;
    }

    .place-card-schedule .schedule-times .schedule-item:nth-child(odd) .prayer-name {
        flex: 0 0 56px;
        max-width: 56px;
        font-size: .8rem;
    }

    .schedule-card .schedule-times .schedule-item:nth-child(even) .prayer-name,
    .place-card-schedule .schedule-times .schedule-item:nth-child(even) .prayer-name {
        flex: 0 0 52px;
        max-width: 52px;
        font-size: .8rem;
    }

    .schedule-card .schedule-item .prayer-time,
    .place-card-schedule .schedule-item .prayer-time {
        flex: 1 1 auto;
        text-align: right;
        white-space: nowrap;
        font-size: .84rem;
    }
}

/* Place detail specific styles */

/* Use shared container so these sections align exactly with the banner edges (no inner gutter) */
.place-header, .breadcrumb, .address-row, .facilities, .notes {
  /* center and limit width like other page containers but remove horizontal gutter */
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}

.place-header {
    margin: 0px !important;
}
.place-header h1 { font-size: 2.25rem; color: #234b2b; margin: 0 0 .5rem; }
.place-header .other-names { color: #666; margin: 0 0 .75rem; font-style: italic; }

.breadcrumb {
    margin: 10px 0px 10px 0px !important;
    display:flex;
    gap: .5rem;
    align-items: center;
    color: #666;
    font-size: 0.95rem;
}
.breadcrumb a { color:#4a7c59; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb-separator { color:#999; }
.breadcrumb-current { color:#333; font-weight:600; }

.address-row { margin: 10px 0px 20px 0px !important }
.address-row a { color:#2b6b45; text-decoration:underline; font-weight:500; }

.place-banner {
  margin: 0.5rem auto 1rem;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
  border-radius: 12px;
}
.place-banner { padding-left: 0 !important; padding-right: 0 !important; }
.place-banner .banner-link {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.place-banner .banner-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  border-radius: 12px;
}

/* Keep full-bleed alignment but enforce rounded clipping on all corners */
.place-banner.edge-align {
  border-radius: 12px;
  overflow: hidden;
  padding: 0 !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Make banner link span the inner content gutter so image appears flush with cards
   while keeping the page content aligned with the top navigation. Adjusts for the
   content wrapper horizontal padding (1.5rem). */
.place-banner.edge-align .banner-link {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  width: calc(100% + 3rem);
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

.place-banner.edge-align .banner-image {
  border-radius: 12px !important;
  display: block;
}

.place-banner .banner-link:focus { outline: none; }
.carousel-placeholder { width:100%; height:400px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f5f5f5 0%,#e9e9e9 100%); border-radius:12px; }

/* Compensate for .content-wrapper horizontal padding so these sections align flush with the banner */
.content-wrapper .place-header,
.content-wrapper .breadcrumb,
.content-wrapper .address-row,
.content-wrapper .facilities,
.content-wrapper .notes {
  /* Remove compensating negative margins � align these sections to the shared page width
     and let the banner and container control horizontal spacing. This avoids a residual
     gap on the right in some layouts. */
  margin: 0 auto;
  max-width: var(--page-max-width);
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}

/* Additional left-shift to remove residual gutter in some browsers/layouts */
.content-wrapper .place-header,
.content-wrapper .breadcrumb,
.content-wrapper .address-row,
.content-wrapper .facilities,
.content-wrapper .notes {
  /* remove extra left-shift; alignment is handled by negative margins/padding above
     translating can create a residual gap on the right in some browsers */
  transform: none;
}
.last-updated { margin: .5rem auto; padding: .75rem 1rem; background:#f8f9fa; border-left:4px solid #4a7c59; color:#666; border-radius:6px; }
.last-updated .relative-time { font-weight:600; color:#2c5f2d; margin-left:.5rem; }

/* Restore place detail layout consistency */
.schedule-card .schedule-header-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
}

.schedule-card .schedule-header-row h2 {
    margin: 0;
}

.schedule-card .schedule-header-row .edit-schedule-btn {
    margin-left: auto;
    white-space: nowrap;
}

.facilities.edge-align .info-section,
.notes.edge-align .info-section {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.facilities,
.notes {
  max-width: none;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

.content-wrapper .facilities,
.content-wrapper .notes {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.facilities.edge-align > .info-section,
.notes.edge-align > .info-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Place detail schedule edit modal */
.schedule-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.edit-schedule-btn {
    white-space: nowrap;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: auto;
}

.modal-dialog {
    position: relative;
    z-index: 100001;
    pointer-events: auto;
    background: #fff;
    border-radius: 12px;
    width: min(95vw, 640px);
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.modal-dialog-wide {
    width: min(95vw, 900px);
}

.modal-header {
    padding: 18px 24px 12px;
    border-bottom: 1px solid #eee;
    font-size: 1.35rem;
    font-weight: 600;
    background: #2c5f2d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.7rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0 0 16px;
}

.modal-body {
    padding: 1rem 1.5rem;
    overflow: auto;
}

.modal-footer {
    background: #fff;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
}

.modal-schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.modal-schedule-table th,
.modal-schedule-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
    text-align: left;
}

.edit-time-type-select,
.edit-time-offset-select,
.edit-time-number,
.edit-time-picker {
    padding: .52rem .72rem;
    border: 1px solid #d7dfd8;
    border-radius: 10px;
    background: #fff;
    color: #1f2b21;
    font-size: .95rem;
    line-height: 1.2;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.edit-time-type-select,
.edit-time-offset-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #2c5f2d 50%),
        linear-gradient(135deg, #2c5f2d 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 3px),
        calc(100% - 10px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.1rem;
}

.edit-time-type-select {
    min-width: 210px;
}

.edit-time-offset-select {
    min-width: 86px;
}

.edit-time-type-select:focus,
.edit-time-offset-select:focus,
.edit-time-number:focus,
.edit-time-picker:focus {
    border-color: #2c5f2d;
    box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.15);
}

.edit-time-number {
    width: 90px;
}

.edit-time-picker {
    min-width: 145px;
    font-weight: 600;
    letter-spacing: .02em;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
    border-color: #c9d8cb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    padding-right: 2.25rem;
}

.edit-time-picker:hover {
    border-color: #7ea889;
}

.edit-time-picker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .9;
    filter: hue-rotate(55deg) saturate(1.4);
}

.edit-time-picker::-webkit-datetime-edit {
    color: #1f2b21;
}

.edit-time-suffix {
    margin-left: .4rem;
    color: #444;
}

.modal-success-dialog {
    max-width: 400px;
    text-align: center;
}

.modal-success-header {
    justify-content: center;
}

.modal-success-body {
    padding: 2rem;
}

.modal-success-footer {
    justify-content: center;
}

.contact-card .contact-value {
    min-width: 0;
}

.contact-card .contact-value a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 700px) {
    .modal-schedule-table thead {
        display: none;
    }

    .modal-schedule-table,
    .modal-schedule-table tbody,
    .modal-schedule-table tr,
    .modal-schedule-table td {
        display: block;
        width: 100%;
    }

    .modal-schedule-table tr {
        padding: .75rem 0;
        border-bottom: 1px solid #e6e8ec;
    }

    .modal-schedule-table td {
        border: none;
        padding: .2rem 0;
    }

    .modal-schedule-table td::before {
        content: attr(data-label);
        display: block;
        font-size: .82rem;
        font-weight: 600;
        color: #5e6b61;
        margin-bottom: .25rem;
    }

    .edit-time-type-select,
    .edit-time-offset-select,
    .edit-time-picker {
        width: 100%;
        min-width: 0;
    }

    .edit-time-suffix {
        margin-left: 0;
        margin-top: .35rem;
        display: block;
    }

    .schedule-card.content-card,
    .contact-card.content-card {
        padding: .45rem .5rem;
    }

    .schedule-card .info-section,
    .contact-card .info-section,
    .contact-card .contact-info {
        padding: 0;
        margin: 0;
    }

    .schedule-card .schedule-times,
    .place-card-schedule .schedule-times {
        gap: .3rem;
    }

    .schedule-card .schedule-item,
    .place-card-schedule .schedule-item {
        padding: .32rem .4rem;
    }

    .schedule-card .schedule-header-row {
        margin-bottom: .2rem;
    }

    .contact-card .contact-item {
        margin-bottom: .4rem;
    }
}
.spinner {
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .schedule-card .schedule-table-four-column {
        border-spacing: 0 .45rem;
    }

    .schedule-card .schedule-table-four-column tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .35rem .6rem;
        padding: .55rem .6rem;
    }

    .schedule-card .schedule-table-four-column td {
        padding: 0;
    }

    .schedule-card .schedule-table-four-column .prayer-name,
    .schedule-card .schedule-table-four-column .prayer-time {
        text-align: left;
    }

    .schedule-card .schedule-table-four-column .prayer-time-value {
        min-width: 0;
        text-align: right;
        width: 100%;
    }

    .schedule-card .schedule-table-four-column .prayer-chip {
        width: 100%;
    }
}

/* Store download prompt: offered to a Windows or Android browser by the website.
   See PrayDigital.UI/Components/AppDownloadPrompt.razor and site.js. */
.app-download-prompt {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 100050;
    background: #ffffff;
    border: 1px solid #dbe5dd;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.app-download-prompt[hidden] {
    display: none;
}

.app-download-prompt__content {
    min-width: 0;
}

.app-download-prompt__title {
    color: #234b2b;
    font-weight: 700;
    line-height: 1.2;
}

.app-download-prompt__text {
    color: #4f5f53;
    font-size: .92rem;
    line-height: 1.25;
    margin-top: .2rem;
}

.app-download-prompt__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.app-download-prompt__btn {
    border-radius: 8px;
    border: 1px solid #cfd9d2;
    padding: .45rem .72rem;
    font-weight: 600;
    font-size: .86rem;
    cursor: pointer;
    background: #fff;
    text-decoration: none;
}

.app-download-prompt__btn--primary {
    border-color: #2c5f2d;
    background: #2c5f2d;
    color: #fff;
}

.app-download-prompt__btn--ghost {
    background: #fff;
    color: #344338;
}

@media (max-width: 700px) {
    .app-download-prompt {
        flex-direction: column;
        align-items: stretch;
    }

    .app-download-prompt__actions {
        justify-content: flex-end;
    }
}
/* ------------------------------------------------------------------
   Home page search tabs, map view and the shared places grid.
   Moved out of Pages/Index.cshtml so CoreWeb and the MAUI app render
   identical markup from the same stylesheet (RCL is the single source).
   ------------------------------------------------------------------ */
    .search-box-container {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
    }

    #mosqueSearchResults.search-results {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        right: auto;
        width: 100%;
        max-height: 360px;
        overflow: auto;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        padding: 0.5rem;
        box-sizing: border-box;
        z-index: 2;
    }

    #mosqueSearchResults .place-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        border-radius: 6px;
        text-decoration: none;
        color: inherit;
    }

    #mosqueSearchResults .place-item:hover {
        background: #fbfbfb;
    }

    /* Shared places grid and card layout used by Recently Updated, Nearest and Address results */
    .places-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        align-items: start;
    }

    .place-card {
        background: var(--bg-primary);
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .place-card-image img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        display: block;
    }

    .place-card-image {
        height: 260px;
        overflow: hidden;
        display: block;
    }

    .place-card-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 260px;
        background: var(--bg-primary);
    }

    .place-card-content {
        padding: 0.75rem 0.85rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    @media (max-width: 700px) {
        .places-grid {
            grid-template-columns: 1fr;
        }
        .place-card-image img { height: 220px; }
        .place-card-image { height: 220px; }
        .place-card-placeholder { height: 220px; }
        .place-card-image .place-card-placeholder { height: 220px; }
    }

    /* Type-ahead dropdown subtitle for other known names */
    #mosqueSearchResults .place-subtitle {
        font-size: 0.9rem;
        color: var(--muted-text, #666);
        margin-top: 0.15rem;
    }

    /* Map view */
    .map-view-container {
        padding: 0.5rem 0;
        position: relative;
    }

    .map-search-box-container {
        margin-bottom: 0.75rem;
    }

    .map-search-feedback {
        margin-top: 0.5rem;
    }

    #mapViewContainer {
        height: 520px;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
    }

    .map-info-window {
        max-width: 220px;
        font-size: 0.9rem;
        padding: 0.25rem;
    }

    .map-info-name {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .map-info-banner {
        margin-bottom: 0.4rem;
        border-radius: 6px;
        overflow: hidden;
        max-height: 110px;
    }

    .map-info-banner img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        display: block;
    }

    .map-info-address {
        color: #555;
        font-size: 0.85rem;
        line-height: 1.3;
    }

    .map-info-distance {
        margin-top: 0.25rem;
        color: #777;
        font-size: 0.8rem;
    }

    .map-info-schedule {
        margin-top: 0.5rem;
        border-top: 1px solid #ececec;
        padding-top: 0.4rem;
        font-size: 0.8rem;
    }

    .map-info-schedule-title {
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: #444;
    }

    .map-info-schedule-row {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        color: #555;
        line-height: 1.35;
    }

    .search-this-area-btn {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        border: 1px solid #d8d8d8;
        background: #fff;
        color: #1a6b3a;
        border-radius: 999px;
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
        font-weight: 600;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);
        cursor: pointer;
    }

    @media (max-width: 700px) {
        .map-search-box-container {
        margin-bottom: 0.75rem;
    }

    .map-search-feedback {
        margin-top: 0.5rem;
    }

    #mapViewContainer {
            height: 400px;
        }
    }

/* A banner file can be missing from storage. The shared components hide the failed image and
   reveal this placeholder instead, which is what the website's resolver produces up front. */
.place-card-image .place-card-placeholder {
    display: none;
}

/* Static content pages (About, Privacy). Their section headings deliberately match the "Your Name"
   label on the contact form — same size and weight — so the pages read as prose instead of a stack
   of headlines. The page title above them keeps its large treatment. */
.content-page .info-section h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.5rem 0 0.4rem;
}

.content-page .info-section h2:first-child {
    margin-top: 0;
}