/* custom.css — post-migration design tweaks. Loaded after the theme stylesheet so these
   rules win. Bump the ?v= query in Base.astro when changing this file (assets are
   immutable-cached). */

html, body { margin: 0; }

/* 1) Narrower 1280px content width (theme default was 1600px) */
.container { max-width: 1280px; }

/* Reduce the large gap between the nav and the hero content (top whitespace) */
.section.section-hero { grid-row-gap: 2.5rem; grid-column-gap: 2.5rem; }

/* Full-bleed top/bottom border on the sticky tags / category filter. */
.container.container-categories { max-width: none; width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
.container.container-categories > .category-list {
  box-sizing: border-box; width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto;
  padding-left: 3rem; padding-right: 3rem;
}
@media (max-width: 991px) { .container.container-categories > .category-list { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (max-width: 767px) { .container.container-categories > .category-list { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 479px) { .container.container-categories > .category-list { padding-left: 1.75rem; padding-right: 1.75rem; } }

/* 4) Full-bleed divider under the single-post hero — matches the full-width section borders */
.section.section-hero.section-hero-style { border-bottom-color: #d9d9d9; }

/* 3) Split hero layout — top-aligned so the copy sits near the top (less whitespace) */
.hero-layout { display: grid; grid-template-columns: 1.05fr 1fr; align-items: start; gap: 5rem; width: 100%; }
.hero-layout .title.hero { max-width: 36ch; padding-top: 1rem; }
/* Uniform white border/padding on all four sides (theme only padded left/right). */
.container.hero-shell { padding: 3rem; }

/* 3a) Hero figure — a single full gallery image, centered, that tilts (skews) smoothly toward the
   cursor on hover (enhance.js). No card chrome: no border, no border-radius, no shadow. */
.hero-figure { width: 100%; max-width: 360px; margin: auto; align-self: center;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1); will-change: transform; }
.hero-figure.is-tilting { transition: none; }   /* instant cursor tracking; the ease applies on enter/leave */
.hero-figure img { width: 100%; height: auto; display: block; }

.sites-card:hover { opacity: 1; }

/* 5) "More designs" infinite-scroll section on single posts */
.more-designs { margin-top: 4rem; }
.more-designs .more-heading { margin-bottom: 1.5rem; }
#more-grid { margin-top: 1.5rem; }
#more-sentinel { height: 1px; }

@media (max-width: 991px) {
  .hero-layout { grid-template-columns: 1fr; gap: 3rem; }
  .hero-layout .title.hero { max-width: 50ch; }
  .hero-figure { margin: 0 auto; }
}
@media (max-width: 479px) {
  .hero-figure { max-width: 280px; }
}