/* Lombok Expats — design tokens */
:root {
  --bg:        #EEF3EF;
  --green:     #0C3326;
  --green-2:   #0A2A1F;
  --gold:      #D9AE52;
  --gold-2:    #F0D492;
  --button:    #136F6D;
  --button-h:  #0D4F4E;
  --text:      #10201A;
  --muted:     #4A5A52;
  --border:    #DCE5DF;
  --card:      #FFFFFF;
  --r-md: 12px; --r-sm: 8px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "Figtree", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px; line-height: 1.55; color: var(--text);
}
/* Buttons: strip Safari/iOS native styling globally so our design actually
   paints. Without this, iOS Safari renders <button> as its default blue
   bubble regardless of background/colour. */
button, .btn, input[type=submit], input[type=button] {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
h1,h2,h3,h4 { font-family: "Reem Kufi", system-ui, sans-serif; font-weight: 600; margin: 0 0 .5em; color: var(--text); }
h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
a { color: var(--button); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 1rem; }

/* ================= MARQUEE (top strip) ================= */
.marquee {
  background: var(--gold); color: var(--text);
  height: 36px; overflow: hidden; position: relative;
  width: 100%;
}
.marquee-track {
  display: flex; align-items: center; gap: 2.5rem;
  height: 100%; white-space: nowrap; width: max-content;
  animation: marq-scroll 42s linear infinite;
  padding-left: 1rem;
}
.marquee-item {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .92rem; font-weight: 500; color: var(--text);
}
.marquee-item img {
  height: 22px; width: auto; border-radius: 4px; object-fit: cover;
}
.marquee-item .m-title { font-weight: 600; }
.marquee-item .m-dot { color: var(--green); opacity: .7; }
.marquee-item .m-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--gold); border-radius: 999px;
  padding: .18rem .7rem; font-size: .82rem; font-weight: 600;
  text-decoration: none; margin-left: .3rem;
}
.marquee-item .m-pill:hover { background: var(--green); color: var(--gold-2); text-decoration: none; }
@keyframes marq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee-track,
.marquee.paused .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none; width: max-content; }
}

/* ================= SLIM HEADER ================= */
.slim-header {
  background: var(--green); color: #fff;
  height: 52px; display: flex; align-items: center;
}
.slim-header .inner {
  max-width: var(--max); margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 1rem; padding: 0 1rem;
}
.brand {
  display: inline-flex; align-items: baseline; gap: .5rem; color: #fff;
  font-family: "Reem Kufi", sans-serif; font-size: 1.125rem; letter-spacing: .02em;
  text-decoration: none;
}
.brand .arabic {
  font-family: "Amiri", serif; font-weight: 700; color: var(--gold);
  font-size: 1.1rem; line-height: 1; letter-spacing: .02em;
}
.brand:hover { text-decoration: none; color: var(--gold-2); }

/* desktop nav pills */
.desk-nav {
  display: flex; align-items: center; gap: .4rem; margin-left: auto;
  flex-wrap: nowrap;
}
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem .9rem; border-radius: 999px;
  border: 1px solid var(--gold); background: transparent;
  color: #fff; font-size: .92rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  min-height: 32px; line-height: 1.2;
}
.pill:hover { background: rgba(217,174,82,.12); color: var(--gold-2); text-decoration: none; }
.pill.active { background: var(--gold); color: var(--text); border-color: var(--gold); }
.pill.active:hover { color: var(--text); }
.lang-pill {
  margin-left: .4rem; display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--gold);
  color: var(--gold-2); font-size: .82rem; font-weight: 600;
  text-decoration: none; min-height: 32px; letter-spacing: .04em;
}
.lang-pill:hover { background: rgba(217,174,82,.12); text-decoration: none; color: var(--gold-2); }

/* hide the mobile nav row on desktop */
.mobile-nav { display: none; }

@media (max-width: 760px) {
  .slim-header { height: 52px; }
  .slim-header .inner { gap: .6rem; }
  .desk-nav { display: none; }
  .lang-pill { margin-left: auto; }

  /* mobile pill row sits directly below the hero (home.ejs places it there) */
  .mobile-nav {
    display: block; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--green); padding: .55rem .75rem;
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav .mn-row {
    display: inline-flex; gap: .4rem; flex-wrap: nowrap; white-space: nowrap;
  }
  .mobile-nav .pill { font-size: .88rem; }
}

/* ================= HERO ================= */
.hero {
  position: relative; background: var(--green); color: #fff; overflow: hidden;
  height: 78vh; min-height: 440px; max-height: 820px;
}
.hero video,
.hero .hero-poster-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* readability gradient over the bottom 45% of the hero — no colour tint */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}
/* bottom-LEFT title block */
.hero .hero-inner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: var(--max); margin: 0 auto;
  padding: 1rem 1rem 72px; text-align: left;
}
.hero .arabic {
  display: block;
  font-family: "Amiri", serif; font-weight: 700; color: var(--gold);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem); line-height: 1; letter-spacing: .02em;
  margin-bottom: .4rem;
}
.hero h1 {
  color: #fff; font-size: clamp(1.6rem, 4vw, 2.8rem); margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.35); max-width: 36rem;
}
@media (max-width: 760px) {
  .hero { height: 66vh; min-height: 360px; max-height: 620px; }
  .hero .hero-inner { padding-bottom: 48px; }
}

.hero .hero-poster-bg { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero video { display: none; }
  .hero .hero-poster-bg { display: block; }
}

/* arcade of pointed arches at the base of the hero */
.hero-arches { position: relative; height: 24px; margin-top: -1px; z-index: 3; display: block; }

/* ================= SEARCH CARD (plain, sits below the arcade) ================= */
.search-card {
  max-width: 44rem; margin: 1rem auto 0;
  background: #fff; border-radius: 14px;
  padding: .55rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem;
  box-shadow: 0 6px 20px rgba(10,42,31,.08);
  border: 1px solid var(--border);
}
.search-card input {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px;
  min-height: 48px; font-size: 1rem; color: var(--text); background: #fff;
}
.search-card button {
  min-height: 44px; min-width: 44px; padding: 0 1rem; border-radius: 10px;
  background: var(--button); color: #fff; border: 0; font-size: 1rem; cursor: pointer;
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  -webkit-appearance: none; appearance: none; font-family: inherit;
}
.search-card button:hover { background: var(--button-h); }
.search-card button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.search-filters-row {
  max-width: 44rem; margin: .8rem auto 0;
  display: flex; gap: .5rem;
}
.search-filters-row select {
  flex: 1; min-height: 44px; padding: .6rem .8rem;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.1rem; min-height: 44px; min-width: 44px;
  background: var(--button); color: #fff; border: 0; border-radius: var(--r-sm);
  cursor: pointer; font: 600 1rem "Figtree", system-ui, sans-serif;
  text-decoration: none;
}
.btn:hover { background: var(--button-h); text-decoration: none; color: #fff; }
.btn.secondary { background: #fff; color: var(--button); border: 1px solid var(--button); }
.btn.secondary:hover { background: #F6FBFA; color: var(--button-h); border-color: var(--button-h); }
.btn.gold { background: var(--gold); color: var(--green); }
.btn.gold:hover { background: var(--gold-2); color: var(--green); }
.btn.black { background: var(--text); color: var(--gold); }
.btn.black:hover { background: #000; color: var(--gold); }
.btn.block { width: 100%; }

/* ================= LAYOUT ================= */
/* `minmax(0, …)` forces the grid cell's min to 0 instead of min-content,
   so a wide child (A–Z strip, chip rail, long board-post title) can't
   push the whole column past the viewport. Without this, the implicit
   min-width:auto on grid tracks lets a 1464-px flex row make the page
   itself 1464-px wide → iOS Safari zooms out to fit. */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem; padding: 1.5rem 0 3rem;
}
.main-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .main-grid { grid-template-columns: minmax(0, 1fr); }
  /* on mobile, sidebar cards full-width AFTER the results */
  .sidebar { order: 2; }
}

/* ================= CATEGORY CHIPS ================= */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.chips a {
  display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .8rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
  font-size: .9rem; white-space: nowrap;
}
.chips a.active { background: var(--green); color: #fff; border-color: var(--green); }
.chips a:hover { background: var(--gold-2); color: var(--text); text-decoration: none; border-color: var(--gold); }

/* mobile category swipe */
@media (max-width: 760px) {
  .chips.swipe {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x mandatory;
    padding: .25rem 0;
  }
  .chips.swipe::-webkit-scrollbar { display: none; }
  .chips.swipe li { scroll-snap-align: start; }
}

/* ================= A–Z — DESKTOP ROW ================= */
.az-desk {
  display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 1rem;
}
.az-desk a, .az-desk span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 6px; font-weight: 600; font-size: .9rem;
}
.az-desk a { background: var(--bg); color: var(--text); }
.az-desk a:hover { background: var(--gold-2); text-decoration: none; }
.az-desk a.active { background: var(--green); color: #fff; }
.az-desk span { color: #B8C3BD; }

/* ================= A–Z — MOBILE SNAP STRIP ================= */
.az-wheel { display: none; }
@media (max-width: 760px) {
  .az-desk { display: none; }
  .az-wheel {
    display: block; margin: 0 0 1rem;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: .5rem 0;
  }
  .az-wheel-track {
    display: flex; gap: .4rem; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /* leave half the container's width (minus half an item) on each side so
       the first "All" and the last letter can both snap to centre. */
    padding: 0 calc(50% - 24px);
  }
  .az-wheel-track::-webkit-scrollbar { display: none; }
  .az-item {
    flex: 0 0 48px; scroll-snap-align: center;
    height: 44px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: #10201A; font-weight: 600; font-size: 1rem;
    text-decoration: none;
    transition: transform .18s ease, color .18s ease, background .18s ease;
    transform-origin: center;
  }
  .az-item:hover, .az-item:focus-visible { text-decoration: none; }
  .az-item.disabled { color: #B8C3BD; opacity: .55; pointer-events: none; }
  .az-item.is-center {
    transform: scale(1.35);
    background: var(--gold); color: #10201A;
    box-shadow: 0 4px 12px rgba(217,174,82,.4);
  }
}

/* ================= BIZ GRID / CARD ================= */
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.biz-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.biz-card:hover { border-color: var(--button); }
.biz-card h3 { margin: 0; font-size: 1.1rem; }
.biz-card .meta { color: var(--muted); font-size: .9rem; }
.biz-card .top { display: flex; align-items: center; gap: .7rem; }
.biz-card .initials-arch {
  width: 44px; height: 44px; flex-shrink: 0; color: #fff; font-family: "Reem Kufi", sans-serif;
  font-weight: 600; font-size: 1rem;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: .25rem;
  clip-path: path("M22 0 C34 0 44 10 44 24 L44 44 L0 44 L0 24 C0 10 10 0 22 0 Z");
}
.cat-food        .initials-arch { background: #B04A3F; }
.cat-accommodation .initials-arch { background: #6B4F8F; }
.cat-wellness    .initials-arch { background: #5B8A72; }
.cat-surf_dive   .initials-arch { background: #2B6CB0; }
.cat-property    .initials-arch { background: #986C34; }
.cat-trades      .initials-arch { background: #5A5A5A; }
.cat-legal_visa  .initials-arch { background: #3B4A5B; }
.cat-retail      .initials-arch { background: #AC4C8C; }
.cat-health      .initials-arch { background: #C76648; }
.cat-education   .initials-arch { background: #4A6E9C; }

/* ================= SIDEBAR + SECTION CARDS ================= */
.sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* generic card */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 1rem;
}

/* -------- Board sidebar list -------- */
.board-list { display: flex; flex-direction: column; gap: .5rem; }
.board-tile {
  display: flex; align-items: center; gap: .7rem; padding: .55rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.board-tile:hover { border-color: var(--button); text-decoration: none; }
.board-tile .logo-sq {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  object-fit: cover; border: 1px solid var(--border);
}
.board-tile .arch-sq {
  width: 40px; height: 40px; flex-shrink: 0; color: #fff; font-family: "Reem Kufi", sans-serif;
  font-weight: 600; font-size: .85rem;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: .2rem;
  clip-path: path("M20 0 C31 0 40 9 40 22 L40 40 L0 40 L0 22 C0 9 9 0 20 0 Z");
}
.board-tile .btt { min-width: 0; flex: 1; }
.board-tile .btag {
  display: inline-block; padding: .08rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: 0;
  color: #fff;
}
.btag.k-specials      { background: #B04A3F; }
.btag.k-new_products  { background: #2B6CB0; }
.btag.k-new_locations { background: #5B8A72; }
.btag.k-events        { background: #986C34; }
.btag.k-community     { background: #3B4A5B; }
.board-tile .btitle {
  display: block; font-weight: 600; font-size: .95rem; margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.board-tile .bdate { color: var(--muted); font-size: .78rem; }

/* -------- Support card (deep green with gold star band + thin arch outline) -------- */
.section-card.support {
  background: var(--green); color: #fff; border: 0; border-radius: var(--r-md);
  position: relative; padding: 1.6rem 1rem 1rem; overflow: hidden;
}
.section-card.support::before {
  /* 8-point star band along the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='xMidYMid slice'><defs><g id='s'><polygon points='7,2 8.4,7 14,7 9.3,10 11,14 7,11 3,14 4.7,10 0,7 5.6,7' fill='black'/></g></defs><use href='%23s' x='0'/><use href='%23s' x='14'/><use href='%23s' x='28'/><use href='%23s' x='42'/><use href='%23s' x='56'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='xMidYMid slice'><defs><g id='s'><polygon points='7,2 8.4,7 14,7 9.3,10 11,14 7,11 3,14 4.7,10 0,7 5.6,7' fill='black'/></g></defs><use href='%23s' x='0'/><use href='%23s' x='14'/><use href='%23s' x='28'/><use href='%23s' x='42'/><use href='%23s' x='56'/></svg>");
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.section-card.support::after {
  /* thin gold pointed-arch outline sitting inside the card */
  content: ""; position: absolute; left: 1rem; right: 1rem; top: 2rem; bottom: 1rem;
  pointer-events: none; opacity: .18;
  border: 1px solid var(--gold);
  border-radius: 110px 110px var(--r-md) var(--r-md) / 90px 90px var(--r-md) var(--r-md);
}
.section-card.support h3 { color: var(--gold); margin: 0 0 .4rem; position: relative; z-index: 1; }
.section-card.support p  { color: var(--gold-2); margin: 0 0 .9rem; position: relative; z-index: 1; }
.section-card.support .btn { position: relative; z-index: 1; }

/* -------- List-your-business card (gold w/ subtle arch motif + black text/button) -------- */
.section-card.list-biz {
  background: var(--gold); color: var(--text); border: 0; border-radius: var(--r-md);
  padding: 1rem; position: relative; overflow: hidden;
}
.section-card.list-biz::before {
  /* arch motif in the corner */
  content: ""; position: absolute; right: -24px; bottom: -24px;
  width: 150px; height: 150px; opacity: .25; pointer-events: none;
  background: var(--text);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 10 C75 10 90 30 90 55 L90 100 L10 100 L10 55 C10 30 25 10 50 10 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 10 C75 10 90 30 90 55 L90 100 L10 100 L10 55 C10 30 25 10 50 10 Z' fill='black'/></svg>");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.section-card.list-biz h3 { margin: 0 0 .4rem; color: var(--text); position: relative; z-index: 1; }
.section-card.list-biz p  { margin: 0 0 .9rem; color: var(--text); position: relative; z-index: 1; }
.section-card.list-biz .btn { position: relative; z-index: 1; }

/* ================= FORMS ================= */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field.full { grid-column: 1 / -1; }
label { font-weight: 500; color: var(--text); font-size: .95rem; }
input[type=text], input[type=url], input[type=number], input[type=email],
input[type=tel], input[type=date], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: .7rem .8rem; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font: 1rem "Figtree", system-ui, sans-serif; color: var(--text); background: #fff;
}
textarea { min-height: 100px; resize: vertical; }
.radio-row { display: flex; flex-direction: column; gap: .4rem; }
.radio-row label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; min-height: 44px; cursor: pointer; }
.err { color: #B04A3F; font-size: .85rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ================= BUSINESS PROFILE ================= */
.biz-hero { padding: 2rem 0 1rem; display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .biz-hero { grid-template-columns: 80px 1fr; } }
.biz-hero .initials-arch { width: 120px; height: 120px; font-size: 2.2rem; padding-bottom: .5rem;
  clip-path: path("M60 0 C90 0 120 28 120 60 L120 120 L0 120 L0 60 C0 28 30 0 60 0 Z"); }
.biz-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.biz-section { margin: 1.5rem 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.gallery img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }

/* ================= SUPPORT PAGE ================= */
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .8rem 0; }
.amount-grid button {
  background: #fff; border: 2px solid var(--border); border-radius: var(--r-sm);
  padding: .8rem .5rem; font: 600 1rem "Figtree"; min-height: 48px; cursor: pointer; color: var(--text);
}
.amount-grid button.active { border-color: var(--button); background: #F6FBFA; }
@media (max-width: 500px) { .amount-grid { grid-template-columns: repeat(2, 1fr); } }

/* ================= BOARD POSTS (full page) ================= */
.posts-list { display: flex; flex-direction: column; gap: .8rem; }
.post {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem;
}
.post .kind { font-size: .82rem; color: var(--muted); letter-spacing: 0; }
.post h3 { margin: .2rem 0 .3rem; font-size: 1.1rem; }
.post .ends { color: var(--muted); font-size: .85rem; }
.post img { margin-top: .8rem; border-radius: var(--r-sm); border: 1px solid var(--border); max-height: 300px; width: auto; }

/* ================= FOOTER ================= */
.site-footer {
  background: var(--green); color: #fff; margin-top: 3rem; padding: 2rem 1rem 2rem;
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--gold);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='xMidYMid slice'><defs><g id='s'><polygon points='7,2 8.4,7 14,7 9.3,10 11,14 7,11 3,14 4.7,10 0,7 5.6,7' fill='black'/></g></defs><use href='%23s' x='0'/><use href='%23s' x='14'/><use href='%23s' x='28'/><use href='%23s' x='42'/><use href='%23s' x='56'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='xMidYMid slice'><defs><g id='s'><polygon points='7,2 8.4,7 14,7 9.3,10 11,14 7,11 3,14 4.7,10 0,7 5.6,7' fill='black'/></g></defs><use href='%23s' x='0'/><use href='%23s' x='14'/><use href='%23s' x='28'/><use href='%23s' x='42'/><use href='%23s' x='56'/></svg>");
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.site-footer .inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; }
.site-footer a { color: var(--gold-2); }

/* ================= ADMIN ================= */
.admin-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; }
.admin-grid section { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; }
.admin-grid h2 { margin: 0 0 .6rem; }
.admin-grid table { width: 100%; border-collapse: collapse; }
.admin-grid th, .admin-grid td { padding: .55rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .95rem; }
.admin-grid th { background: #F6FBFA; }
.admin-grid form.inline { display: inline; }
.admin-grid .act-btns button { padding: .4rem .7rem; min-height: 36px; }