/**
 * Horizon Commerce — Home Page
 */

/* Hero component (.hp-hero*) lives in hp-components.css — shared across
   all page templates, loads on every page. */

/* ==========================================================================
   Featured Collections grid (homepage)
   ========================================================================== */

.hp-collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hp-sp-6);
}

.hp-collection-card {
  display: block;
  border-radius: var(--hp-r-md);
  overflow: hidden;
  border: 1px solid var(--hp-border);
  text-decoration: none !important;
  transition: border-color var(--hp-dur) var(--hp-ease),
              box-shadow var(--hp-dur) var(--hp-ease),
              transform var(--hp-dur) var(--hp-ease);
  background: var(--hp-bg-surface);
}

.hp-collection-card:hover {
  border-color: var(--hp-gold);
  box-shadow: var(--hp-shadow-raised);
  transform: translateY(-2px);
}

.hp-collection-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hp-bg-raised);
}

.hp-collection-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--hp-ease);
}

.hp-collection-card:hover .hp-collection-card__img-wrap img {
  transform: scale(1.04);
}

.hp-collection-card__label {
  padding: var(--hp-sp-4) var(--hp-sp-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hp-sp-3);
}

.hp-collection-card__name {
  font-weight: 600;
  font-size: var(--hp-text-sm);
  color: var(--hp-text);
}

.hp-collection-card__count {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   Brand Story teaser (homepage)
   ========================================================================== */

.hp-brand-story {
  position: relative;
  overflow: hidden;
  background: var(--hp-bg-raised);
  padding: var(--hp-sp-24) 0;
}

.hp-brand-story__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hp-brand-story__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  display: block;
}

.hp-brand-story__inner {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-5);
}

.hp-brand-story__inner h2 {
  margin: 0;
  font-family: var(--hp-font-display);
  font-size: clamp(var(--hp-text-2xl), 4vw, var(--hp-text-4xl));
  line-height: 1.2;
  color: var(--hp-text);
}

.hp-brand-story__inner p {
  color: var(--hp-text-muted);
  line-height: 1.8;
  margin: 0;
  font-size: var(--hp-text-base);
}

/* ==========================================================================
   Merch grid (homepage preview)
   ========================================================================== */

/* Merch grid + product card component moved to hp-components.css — shared by
   the home "Store" preview and the Best Sellers page. It was home-only here,
   so the Best Sellers merch cards rendered unstyled. */

/* ==========================================================================
   Social / Email strip
   ========================================================================== */

.hp-social-strip {
  text-align: center;
  padding: var(--hp-sp-10) 0;
  border-top: 1px solid var(--hp-border);
  border-bottom: 1px solid var(--hp-border);
}

.hp-social-strip__label {
  font-size: var(--hp-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  margin-bottom: var(--hp-sp-4);
}

.hp-social-strip .hp-social-links {
  justify-content: center;
}

.hp-email-section {
  background: var(--hp-bg);
  padding: var(--hp-sp-24) 0;
  position: relative;
  overflow: hidden;
}

.hp-email-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(201,169,110,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ==========================================================================
   Announcements (Pulse)
   ========================================================================== */

.hp-announcements-section {
  background: var(--hp-surface);
}

.hp-announcements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hp-sp-8);
  margin-top: var(--hp-sp-10);
}

/* Card — flush image at top, rounded corners clip the image */
.hp-announcement-card {
  display: flex;
  flex-direction: column;
  background: var(--hp-bg-surface);
  border-radius: var(--hp-r-md);
  border: 1px solid var(--hp-border);
  overflow: hidden;
  transition: box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-announcement-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Image strip */
.hp-announcement-card__img {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.hp-announcement-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--hp-ease);
}

.hp-announcement-card:hover .hp-announcement-card__img img {
  transform: scale(1.04);
}

/* Body — padding restored here, not on the card root */
.hp-announcement-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--hp-sp-6);
  gap: var(--hp-sp-3);
}

.hp-announcement-card__date {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-gold);
}

.hp-announcement-card__title {
  font-family: var(--hp-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.hp-announcement-card__title a {
  color: var(--hp-text);
  text-decoration: none;
}

.hp-announcement-card__title a:hover {
  color: var(--hp-gold);
}

.hp-announcement-card__excerpt {
  font-size: 0.875rem;
  color: var(--hp-text-muted);
  line-height: 1.65;
  flex: 1;
  margin: 0;
}

.hp-announcement-card__readmore {
  align-self: flex-start;
  margin-top: var(--hp-sp-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-text);
  text-decoration: none;
  transition: color var(--hp-dur) var(--hp-ease);
}

.hp-announcement-card__readmore:hover {
  color: var(--hp-gold);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Hero rules in hp-components.css. */

@media (max-width: 1024px) {
  .hp-collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-announcements-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hp-collections-grid {
    grid-template-columns: 1fr;
  }

  .hp-brand-story__inner {
    max-width: 100%;
  }

  .hp-announcements-grid {
    grid-template-columns: 1fr;
  }
}