/* place.css — the place page + fact box + place cards + P0 home stub.
   Tokens from theme.css. Hierarchy lesson from the Best Muscat listing redesign (07 §5):
   prose is separated by rules; ONLY action cards get borders/elevation. Photography-led hero
   with a navy scrim, never flat colour over a photo. Logical properties throughout so the
   /ar/ mirror is a pure RTL flip. */

.oo-crumbs { max-width: var(--oo-container); margin: 0 auto; padding: var(--oo-3) var(--oo-pad) 0; font-size: var(--oo-text-sm); color: var(--oo-rock-500); display: flex; flex-wrap: wrap; gap: 6px; }
.oo-crumbs a { color: var(--oo-rock-700); text-decoration: none; }
.oo-crumbs a:hover { text-decoration: underline; }
.oo-crumbs span[aria-current] { color: var(--oo-rock-900); }

.oo-place { max-width: var(--oo-container); margin: 0 auto; padding: var(--oo-4) var(--oo-pad) var(--oo-16); }

/* Hero ------------------------------------------------------------------- */
.oo-place-hero { position: relative; border-radius: var(--oo-r-xl); overflow: hidden; min-height: clamp(220px, 38vw, 440px); display: flex; align-items: flex-end; isolation: isolate; box-shadow: var(--oo-shadow-sm); }
.oo-place-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.oo-place-hero.has-photo::after { content: ""; position: absolute; inset: 0; background: var(--oo-scrim); z-index: 0; }
.oo-place-hero-scrim { position: relative; z-index: 1; padding: clamp(20px, 4vw, 40px); color: #fff; }
.oo-place-hero-scrim h1 { color: #fff; margin: 0; font-size: var(--oo-text-4xl); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.oo-eyebrow--light { color: rgba(255,255,255,.85); }
.oo-place-alt { margin: 6px 0 0; color: rgba(255,255,255,.8); font-size: var(--oo-text-lg); }
.oo-credit { font-size: var(--oo-text-xs); color: var(--oo-rock-300); margin: 8px 2px 0; text-align: end; }
.oo-credit a { color: var(--oo-rock-300); }

/* Body grid ---------------------------------------------------------------- */
.oo-place-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--oo-10); margin-block-start: var(--oo-8); }
@media (max-width: 900px) { .oo-place-body { grid-template-columns: 1fr; gap: var(--oo-6); } }
.oo-place-aside { position: sticky; top: calc(var(--site-header-h) + 12px); align-self: start; max-height: calc(100vh - var(--site-header-h) - 24px); overflow: auto; display: grid; gap: var(--oo-4); }
.oo-aside-card { padding: var(--oo-5); }
.oo-aside-card h3 { margin: 0 0 var(--oo-3); }
.oo-map { aspect-ratio: 4 / 3; border-radius: var(--oo-r); overflow: hidden; background: var(--oo-panel); }
.oo-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.oo-coords { font-size: var(--oo-text-sm); color: var(--oo-rock-500); margin: var(--oo-3) 0; }
.oo-provenance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--oo-text-sm); }
.oo-muted { color: var(--oo-rock-500); }

/* Prose ---------------------------------------------------------------------- */
.oo-prose { padding-block: var(--oo-6); border-block-end: 1px solid var(--oo-line); }
.oo-prose h2 { margin: 0 0 var(--oo-3); }
.oo-prose p { margin: 0 0 var(--oo-3); font-size: var(--oo-text-md); line-height: 1.7; max-width: 72ch; }
.oo-summary { font-size: var(--oo-text-lg) !important; color: var(--oo-rock-700); }
.oo-src-note { font-size: var(--oo-text-xs) !important; color: var(--oo-rock-300); }
.oo-highlights { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; }
.oo-faq details { border-block-start: 1px solid var(--oo-line-soft); padding: 10px 0; }
.oo-faq summary { cursor: pointer; font-weight: 600; }
.oo-rail { padding-block: var(--oo-8); }
.oo-rail h2 { margin: 0 0 var(--oo-4); }
.oo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--oo-4); }
.oo-xcard { padding: var(--oo-4); display: grid; gap: 4px; text-decoration: none; color: var(--oo-rock-900); }
.oo-xcard span { color: var(--oo-dune-700); font-weight: 700; }
.oo-disclaimer { font-size: var(--oo-text-xs); color: var(--oo-rock-300); max-width: 90ch; margin: var(--oo-8) 0 0; }
.oo-seclink { text-decoration: none; font-weight: 600; white-space: nowrap; }

/* Fact box — the brand asset ---------------------------------------------- */
.oo-factbox { background: var(--oo-surface); border: 1px solid var(--oo-line); border-radius: var(--oo-r-lg); box-shadow: var(--oo-shadow); padding: var(--oo-5); position: relative; }
.oo-factbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--oo-3); flex-wrap: wrap; margin-block-end: var(--oo-4); }
.oo-factbox-head h2 { margin: 0; font-size: var(--oo-text-xl); }
.oo-factbox-stamp { font-size: var(--oo-text-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--oo-r-pill); }
.oo-factbox-stamp.is-verified { background: var(--oo-palm-050); color: var(--oo-palm-700); }
.oo-factbox-stamp.is-unverified { background: var(--oo-warn-bg); color: var(--oo-warn); border: 1px dashed #ECD7B3; }
.oo-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--oo-3); }
.oo-fact { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 12px; border-radius: var(--oo-r); border: 1px solid var(--oo-line); background: var(--oo-page); }
.oo-fact.is-known { border-color: var(--oo-sea-600); background: var(--oo-surface); border-width: 1.5px; }
.oo-fact.is-unknown { border-style: dashed; color: var(--oo-rock-500); }
.oo-fact-icon { grid-row: 1 / span 2; font-size: 1.15rem; line-height: 1.3; }
.oo-fact-label { font-size: var(--oo-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--oo-rock-500); }
[dir="rtl"] .oo-fact-label { letter-spacing: 0; }
.oo-fact-value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--oo-rock-900); line-height: 1.35; }
.oo-fact.is-unknown .oo-fact-value { font-weight: 500; color: var(--oo-warn); font-size: var(--oo-text-sm); }
.oo-fact-src { grid-column: 2; font-size: 10.5px; color: var(--oo-rock-300); margin-top: 2px; }
.oo-facts-more { margin-block-start: var(--oo-3); }
.oo-facts-more summary { cursor: pointer; font-size: var(--oo-text-sm); color: var(--oo-rock-500); margin-block-end: var(--oo-3); }
.oo-safety { margin-block-start: var(--oo-5); padding-block-start: var(--oo-4); border-block-start: 1px solid var(--oo-line); }
.oo-safety h3 { margin: 0 0 var(--oo-2); font-size: var(--oo-text-md); color: var(--oo-danger); }
.oo-safety ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; font-size: var(--oo-text-base); }
.oo-safety-src { font-size: var(--oo-text-xs); color: var(--oo-rock-300); margin: var(--oo-2) 0 0; }

/* Place cards ------------------------------------------------------------- */
.oo-pcard { background: var(--oo-surface); border: 1px solid var(--oo-line); border-radius: var(--oo-r-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--oo-fast), transform var(--oo-fast); }
.oo-pcard:hover { box-shadow: var(--oo-shadow); transform: translateY(-1px); }
.oo-pcard-img { display: block; aspect-ratio: 16 / 10; background: var(--oo-panel); }
.oo-pcard-img img, .oo-pcard-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.oo-pcard-body { padding: var(--oo-4); display: grid; gap: 4px; }
.oo-pcard-meta { margin: 0; font-size: var(--oo-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--oo-sea-600); }
[dir="rtl"] .oo-pcard-meta { letter-spacing: 0; }
.oo-pcard-name { margin: 0; font-size: var(--oo-text-lg); }
.oo-pcard-name a { color: var(--oo-sea-900); text-decoration: none; }
.oo-pcard-note { margin: 0; font-size: var(--oo-text-sm); color: var(--oo-rock-500); }
.oo-pcard-sum { margin: 2px 0 0; font-size: var(--oo-text-sm); color: var(--oo-rock-700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Home stub ----------------------------------------------------------------- */
.oo-home { padding-block: var(--oo-10) var(--oo-16); }
.oo-home-hero h1 { font-size: var(--oo-text-4xl); margin: 0 0 var(--oo-3); max-width: 20ch; }
.oo-lead { font-size: var(--oo-text-lg); color: var(--oo-rock-700); max-width: 60ch; margin: 0; }
.oo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oo-chip { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: var(--oo-r-pill); background: var(--oo-surface); border: 1px solid var(--oo-line); text-decoration: none; color: var(--oo-sea-900); font-weight: 600; font-size: var(--oo-text-sm); }
.oo-chip b { color: var(--oo-rock-500); font-weight: 600; }
.oo-chip:hover { border-color: var(--oo-sea-600); background: var(--oo-sea-050); }