/*
 * Utility classes used in the PHP markup but missing from assets/app.css.
 *
 * app.css is a compiled Tailwind bundle inherited from the retired React app.
 * It was built by scanning that React source, so utilities that appear only in
 * the newer PHP markup were purged and silently do nothing. This file backfills
 * the ones whose absence causes a visible defect — it is not a full rebuild.
 *
 * Before adding a rule here, confirm the class really is missing:
 *   grep -c '\.the-class{' assets/app.css
 * and that no hand-written sheet or inline <style> already defines it.
 */

/* home.php:1250 — room-card tag badge. Without this the badge gets top:auto,
   drops below the 16:9 image, and is erased by .custom-room-card-image's
   overflow:hidden, hiding PREMIUM / POPULAR / NEW entirely. */
.top-4 {
  top: 1rem;
}

/* locations.php, partials/amenities.php, partials/services.php, testimonial.php —
   keeps native hash jumps clear of the 80px sticky header. Does not affect
   assets/page-hero-scroll.js, which does its own window.scrollTo math. */
.scroll-mt-28 {
  scroll-margin-top: 7rem;
}

/* partials/blogs.php:44 — hero scrim behind the white heading. */
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

/* partials/amenities.php:21 — collage tiles. Without a width they size to each
   image's aspect ratio and the strip renders ragged. */
.w-\[200px\] {
  width: 200px;
}

/* partials/blogs.php:42 and partials/blog-single.php — hero proportions. */
.h-\[40vh\] {
  height: 40vh;
}

.h-\[42vh\] {
  height: 42vh;
}

.min-h-\[280px\] {
  min-height: 280px;
}

@media (min-width: 768px) {
  .md\:w-\[260px\] {
    width: 260px;
  }

  .md\:h-\[50vh\] {
    height: 50vh;
  }

  .md\:h-\[52vh\] {
    height: 52vh;
  }
}

/* partials/home.php:1332-1389 — "Life at Aspiro" cards (4x). Without these six,
   the image wrapper has no height (aspect-ratio missing) so object-cover is a
   no-op, the square image corners poke past the card's rounded corners, the
   icon sits fully inside the image instead of straddling the seam, and body
   copy has zero top padding. */
.aspect-\[16\/10\] {
  aspect-ratio: 16 / 10;
}

.rounded-t-\[24px\] {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.overflow-visible {
  overflow: visible;
}

.pt-9 {
  padding-top: 2.25rem;
}

.mt-auto {
  margin-top: auto;
}

.translate-y-1\/2 {
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/*
 * partials/blog-single.php:45-58 — the DB-authored post body is styled
 * entirely through `[&_p]:…`-style arbitrary variants, all 48 of them dead.
 * app.css includes Tailwind's preflight (p{margin:0}, ul{list-style:none},
 * h1-h6{font-size:inherit}), so without this every post renders as one
 * undifferentiated block: no paragraph spacing, no heading hierarchy, no
 * bullets. Values below are transcribed from the dead classes so the
 * intended design is unchanged — this is a restoration, not a redesign.
 * The table/pre rules are new: DB content isn't otherwise guarded against
 * a wide paste breaking the verified zero-overflow layout at 320px.
 */
.blog-content {
  color: #333;
}

.blog-content h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.blog-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.blog-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.blog-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.blog-content p {
  margin-bottom: 1.25rem;
  color: #444;
}

.blog-content a {
  color: #8b6b38;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-content a:hover {
  color: #c5a059;
}

.blog-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.blog-content ul li + li {
  margin-top: 0.5rem;
}

.blog-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.blog-content ol li + li {
  margin-top: 0.5rem;
}

.blog-content li {
  color: #444;
}

.blog-content blockquote {
  border-left: 4px solid #c5a059;
  padding-left: 1.25rem;
  font-style: italic;
  color: #666;
  margin: 2rem 0;
}

.blog-content img {
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  margin: 2rem 0;
  max-width: 100%;
  height: auto;
}

.blog-content strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* Guards not present in the original design intent: protects the verified
   zero-horizontal-overflow layout against arbitrary DB content. */
.blog-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.blog-content pre {
  overflow-x: auto;
}