/* =========================================================
   KEYS99 - BLOG (/blog/ and articles)
   Layered on css/index.css, css/hub.css and css/legal.css.
========================================================= */

.blog-meta{
  margin:0 0 22px;
  font-size:var(--fs-small);
  color:var(--muted);
}

.blog-body table{
  width:100%;
  margin:0 0 16px;
  border-collapse:collapse;
  font-size:var(--fs-ui);
}

.blog-body th,
.blog-body td{
  padding:8px 10px;
  border:1px solid #d3e0dc;
  text-align:left;
  vertical-align:top;
}

.blog-body th{ background:#f6faf9; color:var(--ink); }

.blog-body ol{
  margin:0 0 12px;
  padding-left:20px;
}

.blog-body .hub-faqs{ margin-bottom:8px; }

.blog-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  margin:28px 0 0;
  padding:16px 18px;
  border:1px solid #d3e0dc;
  border-radius:14px;
  background:#f6faf9;
}

.blog-cta strong{ color:var(--ink); }
.blog-cta span{ flex:1 1 240px; font-size:var(--fs-ui); }
.blog-body .blog-cta a{ text-decoration:none; color:#fff; }

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

.blog-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px;
  border:1px solid #d3e0dc;
  border-radius:16px;
  background:#fff;
}

.blog-card-meta{
  font-size:var(--fs-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--green);
}

.blog-card h2{
  margin:0;
  font-size:var(--fs-lead);
  line-height:1.35;
}

.blog-card h2 a{ color:var(--ink); text-decoration:none; }
.blog-card h2 a:hover{ color:var(--green); }

.blog-card p{
  flex:1;
  margin:0;
  font-size:var(--fs-ui);
  line-height:1.6;
  color:#3d5560;
}

.blog-card time{
  font-size:var(--fs-small);
  color:var(--muted);
}

/* ---------- Blog cards with a cover (project posts) ---------- */

.blog-card.has-cover{ overflow:hidden; }
/* Flush to the top edge while the cover is there (it is removed if
   the image cannot load). */
.blog-card:has(> .blog-card-cover){ padding-top:0; }

.blog-card-cover{
  display:block;
  margin:0 -18px 6px;
  aspect-ratio:16/9;
  background:#e7eeec;
}

.blog-card-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Project post page (/projects/<project>/blog/<post>/) ---------- */

.project-post .section-kicker a{ color:inherit; text-decoration:none; }
.project-post .section-kicker a:hover{ text-decoration:underline; }

.post-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:32px;
  align-items:start;
}

.post-layout .legal-body{ max-width:none; min-width:0; overflow-wrap:anywhere; }

.post-cover{ margin:0 0 22px; }

.post-cover img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
  background:#e7eeec;
}

.post-toc{
  margin:0 0 24px;
  padding:14px 18px;
  border:1px solid #d3e0dc;
  border-left:4px solid var(--green);
  border-radius:12px;
  background:#f6faf9;
}

.post-toc strong{
  display:block;
  margin-bottom:6px;
  font-size:var(--fs-ui);
  color:var(--ink);
}

.post-toc ol{
  margin:0;
  padding-left:20px;
  font-size:var(--fs-ui);
}

.post-toc li{ margin-bottom:4px; }
.legal-body .post-toc a{ font-weight:600; text-decoration:none; }
.legal-body .post-toc a:hover{ text-decoration:underline; }

.post-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0;
}

.post-tags span{
  padding:4px 11px;
  border-radius:999px;
  background:#e4f5ef;
  color:#00664f;
  font-size:var(--fs-small);
  font-weight:700;
}

.post-project{
  position:sticky;
  top:96px;
  overflow:hidden;
  border:1px solid #d3e0dc;
  border-radius:16px;
  background:#fff;
}

.post-project-photo{ display:block; aspect-ratio:4/3; background:#e7eeec; }

.post-project-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.post-project-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px 18px;
}

.post-project-status{
  align-self:flex-start;
  padding:3px 10px;
  border-radius:999px;
  background:#e4f5ef;
  color:#00664f;
  font-size:var(--fs-label);
  font-weight:700;
}

.post-project h2{
  margin:0;
  font-size:var(--fs-h4);
  line-height:1.3;
}

.post-project h2 a{ color:var(--ink); text-decoration:none; }
.post-project h2 a:hover{ color:var(--green); }

.post-project-where,
.post-project-dev{
  margin:0;
  font-size:var(--fs-small);
  color:var(--muted);
}

.post-project-price{
  margin:4px 0 0;
  font-size:var(--fs-h4);
  font-weight:800;
  color:var(--ink);
}

.post-project-price small{ font-size:var(--fs-small); font-weight:600; color:var(--muted); }

.post-project-facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin:6px 0 8px;
}

.post-project-facts div{
  padding:8px 10px;
  border-radius:10px;
  background:#f6faf9;
  min-width:0;
}

.post-project-facts small{
  display:block;
  font-size:var(--fs-label);
  color:var(--muted);
}

.post-project-facts strong{
  font-size:var(--fs-small);
  color:var(--ink);
  overflow-wrap:anywhere;
}

.post-project .btn-primary{ text-align:center; text-decoration:none; }

.post-project-enquire{
  text-align:center;
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--green);
}

.post-similar-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
}

.post-similar{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border:1px solid #d3e0dc;
  border-radius:14px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

.post-similar:hover{ border-color:var(--green); }
.post-similar strong{ color:var(--ink); }
.post-similar span{ font-size:var(--fs-small); color:var(--muted); }
.post-similar .post-similar-price{ font-weight:700; color:var(--green); }

@media (max-width:900px){
  .post-layout{ grid-template-columns:minmax(0, 1fr); gap:24px; }
  .post-project{ position:static; }
}

/* Styled post bodies (the editor's HTML, cleaned by Keys99Project.sanitizeHtml) */
.blog-body img{
  display:block;
  max-width:100%;
  height:auto;
  margin:18px auto;
  border-radius:12px;
}
.blog-body figure{ margin:18px 0; }
.blog-body figcaption{ margin-top:6px; font-size:13px; color:#6b7a77; text-align:center; }
.blog-body blockquote{
  margin:18px 0;
  padding:10px 16px;
  border-left:4px solid #006b5b;
  background:#f6faf9;
  border-radius:0 10px 10px 0;
}
.blog-body blockquote p:last-child{ margin-bottom:0; }
.blog-body pre{ overflow-x:auto; padding:12px 14px; background:#f3f6f5; border-radius:10px; font-size:14px; }
.blog-body hr{ border:0; border-top:1px solid #e7eceb; margin:22px 0; }
.blog-body ul{ padding-left:22px; }
.blog-body .ql-align-center{ text-align:center; }
.blog-body .ql-align-right{ text-align:right; }
.blog-body .ql-align-justify{ text-align:justify; }
.blog-body .ql-indent-1{ padding-left:2em; }
.blog-body .ql-indent-2{ padding-left:4em; }
.blog-body .ql-indent-3{ padding-left:6em; }
@media (max-width:700px){
  .blog-body table{ display:block; overflow-x:auto; }
}


/* ---------- Amenities page (build/amenities.js) ---------- */

.amenity-intro{ font-size:var(--fs-lead); line-height:1.65; margin:0 0 22px; }

/* Photos of the project: the first one large, the rest in a grid. */
.amenity-photos{ margin:0 0 26px; }

.amenity-photo-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-flow:dense;
  gap:8px;
}

.amenity-photo-grid a{
  position:relative;
  display:block;
  aspect-ratio:4 / 3;
  border-radius:12px;
  overflow:hidden;
  background:var(--green-soft, #eaf7f3);
}

/* The first photo takes the left half, as tall as the rows the others
   need (--rows, set in the HTML); an odd last photo stretches to fill
   its row, so the grid has no empty corner. */
.amenity-photo-grid a:first-child{ grid-column:1 / 3; grid-row:1 / span var(--rows, 2); aspect-ratio:auto; }
.amenity-photo-grid a:last-child:nth-child(even):not(:first-child){ grid-column:span 2; }
.amenity-photo-grid[data-single] a:first-child{ grid-column:1 / -1; grid-row:auto; aspect-ratio:16 / 7; }

/* Beat the article's generic image spacing (.blog-body img). */
.blog-body .amenity-photo-grid img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  border-radius:0;
  object-fit:cover;
  transition:transform .3s;
}

.amenity-photo-grid a:hover img,
.amenity-photo-grid a:focus-visible img{ transform:scale(1.04); }

.amenity-group{ margin:0 0 24px; }

.amenity-group h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
}

.amenity-icon{
  flex:none;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--green-soft, #eaf7f3);
  color:var(--green, #006b5b);
}

.amenity-icon svg{ display:block; }

.amenity-group h2 small{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:var(--green-soft, #eaf7f3);
  color:var(--green, #006b5b);
  font-size:var(--fs-small);
  font-weight:800;
}

.amenity-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:8px;
}

/* Beat the article's generic list spacing (legal.css). */
.legal-body .amenity-list{ margin:0; padding:0; }

.legal-body .amenity-list li{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:9px 12px;
  border:1px solid var(--line, #e7eceb);
  border-radius:10px;
  background:#fafcfb;
  font-size:var(--fs-ui);
  font-weight:600;
  min-width:0;
  overflow-wrap:anywhere;
}

/* The same tick as the amenities on the project page. */
.amenity-list li::before{
  content:"✓";
  display:grid;
  place-items:center;
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e4f5ef;
  color:#00866e;
  font-weight:800;
}

@media (max-width:640px){
  .amenity-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  .legal-body .amenity-list li{ padding:8px 10px; gap:6px; font-size:var(--fs-small); }
  .amenity-list li::before{ width:20px; height:20px; font-size:var(--fs-small); }
}

@media (max-width:640px){
  .amenity-photo-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .amenity-photo-grid a:first-child{ grid-column:1 / -1; grid-row:auto; aspect-ratio:16 / 9; }
}