/* ==========================================================================
   home.css — Homepage
   Hinsch Portrait Studio

   Reuses the dark-chrome tokens/header/footer patterns established in
   gallery.css (same reconstruction caveat applies — see note at top of
   gallery.css). This file holds homepage-only sections: hero, intro strip,
   category grid, credibility mosaic.
   ========================================================================== */

:root {
  --color-brown-dark: #3a2f24;
  --color-brown-darker: #241c15;
  --color-olive-brown: #423a2c;
  --color-cream: #ede4d3;
  --color-cream-alt: #f2ead9;
  --color-black-strip: #191510;
  --color-red-seal: #7c1c20;
  --color-gold: #a9822f;
  --color-gold-light: #cdb173;
  --color-ivory: #f7f2e7;
  --color-text: #2c2419;
  --color-text-muted: #5a5041;

  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --font-body: 'EB Garamond', Garamond, Georgia, serif;
  --font-label: 'Barlow Condensed', sans-serif;

  --max-width: 1360px;
}

.home-page {
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.home-page .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.home-page img { max-width: 100%; display: block; }
.home-page a { text-decoration: none; }
a { color: inherit; }
.home-page :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* Header/footer chrome shares class names + look with gallery.css
   (.site-header / .site-footer) — duplicated here so this file is
   self-contained and can be linked on its own. */

.site-header {
  background: var(--color-brown-dark);
  position: relative;
  z-index: 40;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 40px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__seal { width: 58px; height: 58px; flex-shrink: 0; }

.site-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.site-header__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--color-ivory);
  white-space: nowrap;
}

.site-header__brand-tagline {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.site-header__nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.site-header__nav li { display: flex; align-items: center; }

.site-header__nav li:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 12px;
  background: rgba(247, 242, 231, 0.3);
  margin: 0 11px;
}

.site-header__nav a {
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ivory);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-header__nav a:hover,
.site-header__nav li.is-active a { color: var(--color-gold-light); }

.site-header__menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-ivory);
  border-radius: 2px;
  width: 42px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.site-header__menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--color-ivory); }

.site-header__mobile-nav {
  display: none;
  background: var(--color-brown-dark);
  border-top: 1px solid rgba(247, 242, 231, 0.15);
}

.site-header__mobile-nav.is-open { display: block; }

.site-header__mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
}

.site-header__mobile-nav a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-label);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ivory);
  border-bottom: 1px solid rgba(247, 242, 231, 0.1);
}

.site-footer {
  background: var(--color-brown-darker);
  color: var(--color-ivory);
  padding: 56px 0 34px;
  text-align: center;
}

.site-footer__monogram { width: 68px; height: 68px; margin: 0 auto 26px; }
.site-footer__monogram img { width: 100%; height: 100%; object-fit: contain; }

.site-footer__tagline {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(247, 242, 231, 0.82);
  max-width: 46ch;
  margin: 0 auto 22px;
  line-height: 1.6;
}

.site-footer__signature { height: 46px; margin: 0 auto; }
.site-footer__signature img { height: 100%; width: auto; margin: 0 auto; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 32px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--gold { background: var(--color-gold); color: var(--color-brown-darker); border: 1px solid var(--color-gold); }
.btn--gold:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); }

.btn--outline { background: rgba(0, 0, 0, 0.25); color: var(--color-ivory); border: 1px solid var(--color-gold-light); }
.btn--outline:hover { background: var(--color-gold-light); color: var(--color-brown-darker); }

.btn--umber { background: rgba(36, 28, 21, 0.55); color: var(--color-ivory); border: 1px solid rgba(247, 242, 231, 0.5); }
.btn--umber:hover { background: var(--color-brown-darker); }

/* Hero-specific solid buttons matching the approved reference exactly:
   first CTA = solid warm tan fill, second = solid near-black fill + gold border */
.btn--tan {
  background: #a3805a;
  color: var(--color-ivory);
  border: 1px solid #a3805a;
}
.btn--tan:hover { background: #8f6c48; }

.btn--dark-outline {
  background: #241c15;
  color: var(--color-ivory);
  border: 1px solid var(--color-gold-light);
}
.btn--dark-outline:hover { background: #17110c; }

/* ==========================================================================
   HERO
   ========================================================================== */

.home-hero {
  position: relative;
  background: var(--color-brown-dark);
}

.home-hero__media {
  width: 100%;
  aspect-ratio: 2400 / 1644;
  overflow: hidden;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.home-hero__copy {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.home-hero__copy-inner {
  pointer-events: auto;
  max-width: 480px;
  padding: 0 24px 0 40px;
}

.home-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.8vw, 3.4rem);
  line-height: 1.1;
  color: var(--color-ivory);
  margin: 0 0 30px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.home-hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

@media (min-width: 641px) {
  .home-hero { margin: 0 auto; max-width: var(--max-width); }
}

/* ==========================================================================
   INTRO STRIP
   ========================================================================== */

.home-intro {
  padding: 44px 24px 40px;
  text-align: center;
}

.home-intro p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 52ch;
  margin: 0 auto;
}

/* ==========================================================================
   CATEGORY GRID
   ========================================================================== */

.home-categories {
  padding: 0 24px 56px;
}

.home-categories__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.home-category-card {
  position: relative;
  display: block;
  border: 1px solid var(--color-ivory);
  background: var(--color-ivory);
}

.home-category-card__media {
  aspect-ratio: 3 / 5.2;
  overflow: hidden;
}

.home-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-category-card__label {
  background: var(--color-black-strip);
  color: var(--color-ivory);
  text-align: center;
  padding: 10px 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
}

.home-categories__cta {
  text-align: center;
  margin-top: 34px;
}

/* ==========================================================================
   CREDIBILITY / MOSAIC
   ========================================================================== */

.home-credibility {
  background: var(--color-olive-brown);
  padding: 72px 24px;
}

.home-credibility__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  gap: 48px;
  align-items: center;
}

.home-credibility__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-ivory);
  margin: 0 0 22px;
}

.home-credibility__copy {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(247, 242, 231, 0.85);
  margin: 0 0 26px;
}

.home-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  min-width: 0;
}

.home-mosaic__item { min-width: 0; }

.home-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-mosaic__item--tall { aspect-ratio: 4 / 3.4; }
.home-mosaic__item--bottom-left,
.home-mosaic__item--bottom-mid { aspect-ratio: 4 / 3.4; }
.home-mosaic__item--bottom-right { aspect-ratio: 8.4 / 3.4; grid-column: span 1; }

.home-mosaic__bottom-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 14px;
  min-width: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Nav collapses to the mobile menu earlier than other breakpoints because
   the 7-item nav (after adding "What Can Be Created?") needs more horizontal
   room than the site's standard 1080px tablet breakpoint provides. Verified
   empirically. Isolated in its own query so it doesn't shift any other 1080px
   layout rules earlier than intended. */
@media (max-width: 1900px) {
  .site-header__nav { display: none; }
  .site-header__menu-toggle { display: flex; }
}

@media (max-width: 1080px) {
  .home-categories__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .home-credibility__grid { grid-template-columns: 1fr; }
  .home-mosaic__bottom-row { grid-template-columns: 1fr 1fr; }
  .home-mosaic__item--bottom-right { grid-column: span 2; }
}

@media (max-width: 860px) {
  .home-page .container { padding: 0 24px; }
  .site-header__inner { padding: 14px 24px; }

  .home-hero__copy-inner { padding: 0 24px; max-width: 100%; }
  .home-hero__title { font-size: 2rem; }
}

@media (max-width: 640px) {
  .home-page .container { padding: 0 20px; }
  .site-header__inner { padding: 12px 20px; }
  .site-header__seal { width: 46px; height: 46px; }
  .site-header__brand-name { font-size: 1.15rem; }

  .home-hero__media { aspect-ratio: auto; height: 78vh; min-height: 0; }
  .home-hero__copy { align-items: flex-start; padding-top: 40px; }
  .home-hero__copy-inner { padding: 0 20px; }
  .home-hero__title { font-size: 1.7rem; margin-bottom: 22px; }

  .home-intro { padding: 36px 20px 32px; }
  .home-intro p { font-size: 1rem; }

  .home-categories { padding: 0 20px 44px; }
  .home-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .home-credibility { padding: 52px 20px; }
  .home-mosaic__bottom-row { grid-template-columns: 1fr; }
  .home-mosaic__item--bottom-right { grid-column: span 1; }
}