/* ============================================================================
   IRONWOOD BREWING CO + KITCHEN — v2
   assets/css/pages/home.css
   Homepage Styles
   ============================================================================
   Depends on: assets/css/main.css (loaded first via header.php)
   HC Web Labs — hcweblabs.com — April 2026
   ============================================================================ */


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

.hero--home {
  min-block-size: clamp(580px, 85vh, 960px);
}

.hero--home .hero__bg {
  background-image:    url('https://cdn.pixabay.com/photo/2021/09/15/18/47/beer-6627547_1280.jpg');
  background-position: center 40%;
}

.hero--home .hero__title {
  font-size: var(--text-6xl);
}

.hero--home .hero__subtitle {
  font-size:       var(--text-xl);
  max-inline-size: 600px;
  margin-inline:   auto;
}

/* Amber accent rule under eyebrow */
.hero__eyebrow--ruled {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            var(--space-3);
  margin-block-end: var(--space-5);
}

.hero__eyebrow--ruled::before,
.hero__eyebrow--ruled::after {
  content:    '';
  block-size: 1px;
  inline-size:clamp(30px, 6vw, 60px);
  background: var(--color-amber);
  opacity:    0.55;
}


/* ============================================================================
   STATS STRIP
   ============================================================================ */

.stats-strip {
  background:     var(--gradient-copper-amber);
  padding-block:  clamp(1.5rem, 2vw, 2.5rem);
  padding-inline: var(--container-pad);
  border-block:   var(--border-1) solid oklch(1 0 0 / 0.12);
  position:       relative;
  isolation:      isolate;
}

.stats-strip__inner {
  max-inline-size:       var(--container-max);
  margin-inline:         auto;
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-4) var(--space-6);
}

@media (min-width: 480px) {
  .stats-strip__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .stats-strip__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  text-align: center;
  padding:    var(--space-3);
}

.stat-item__number {
  font-family:    var(--font-display);
  font-size:      var(--text-4xl);
  color:          var(--color-white);
  letter-spacing: var(--tracking-wide);
  line-height:    var(--leading-none);
  display:        block;
  text-shadow:    0 1px 3px oklch(0 0 0 / 0.20);
}

.stat-item__label {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  color:          var(--color-white);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity:        0.80;
  margin-block-start: var(--space-1);
  display:        block;
}


/* ============================================================================
   OUR STORY PREVIEW
   ============================================================================ */

.our-story {
  padding-block: var(--section-pad);
  background:    var(--color-surface);
}

.our-story__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(2rem, 4vw, 4rem);
  align-items:           center;
  max-inline-size:       var(--container-max);
  margin-inline:         auto;
  padding-inline:        var(--container-pad);
}

@media (min-width: 768px) {
  .our-story__grid {
    grid-template-columns: 1fr 1fr;
  }

  .our-story__image-wrapper {
    order: -1;
  }
}

@media (min-width: 1024px) {
  .our-story__grid {
    grid-template-columns: 5fr 6fr;
    gap:                   clamp(3rem, 5vw, 6rem);
  }
}

.our-story__image-wrapper {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  aspect-ratio:  4 / 3;
  box-shadow:    var(--shadow-xl);
}

.our-story__image-wrapper img {
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
}

/* Amber accent corner bracket */
.our-story__image-wrapper::before {
  content:         '';
  position:        absolute;
  inset-block-end: var(--space-4);
  inset-inline-end:var(--space-4);
  inline-size:     48px;
  block-size:      48px;
  border-inline-end: var(--border-3) solid var(--color-amber);
  border-block-end:  var(--border-3) solid var(--color-amber);
  z-index:         var(--z-raised);
  opacity:         0.75;
}

.our-story__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.our-story__body {
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


/* ============================================================================
   FEATURED BEERS
   ============================================================================ */

.featured-beers {
  padding-block:    var(--section-pad);
  background-color: var(--color-surface-alt);
}

.featured-beers .container {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-pad);
}

.beers-grid {
  display: grid;
  gap:     clamp(1.5rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .beers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .beers-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Beer card */
.beer-card {
  background:    var(--color-surface);
  border-radius: var(--card-radius);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  display:       flex;
  flex-direction:column;
  transition:
    transform  var(--duration-300) var(--ease-smooth),
    box-shadow var(--duration-300) var(--ease-smooth);
}

.beer-card:hover {
  transform:  translateY(var(--card-lift));
  box-shadow: var(--shadow-xl);
}

.beer-card__media {
  aspect-ratio: 4 / 5;
  overflow:     hidden;
  position:     relative;
}

.beer-card__media img {
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
  object-position: center 68%;
  transition:  transform var(--duration-400) var(--ease-smooth);
}

.beer-card:hover .beer-card__media img {
  transform: scale(var(--media-zoom));
}

/* ABV badge overlaid on image */
.beer-card__abv-badge {
  position:       absolute;
  inset-block-start: var(--space-3);
  inset-inline-end:  var(--space-3);
  background:     var(--color-barrel-char);
  color:          var(--color-amber);
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wider);
  padding-block:  var(--space-1);
  padding-inline: var(--space-3);
  border-radius:  var(--radius-full);
  border:         var(--border-1) solid oklch(1 0 0 / 0.12);
}

.beer-card__body {
  padding:        var(--card-pad);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  flex:           1;
}

.beer-card__style {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    600;
  color: var(--color-amber-dark);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.beer-card__name {
  font-family:    var(--font-display);
  font-size:      var(--type-heading);
  color:          var(--color-copper);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height:    var(--leading-tight);
}

.beer-card__description {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex:        1;
}

.beer-card__meta {
  display:     flex;
  gap:         var(--space-2) var(--space-7);
  padding-block-start: var(--space-3);
  border-block-start:  var(--border-1) solid var(--color-border);
  margin-block-start:  auto;
}

.beer-card__stat {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.beer-card__stat-label {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xs);
  font-weight:    600;
  color:          var(--color-text-subtle);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.beer-card__stat-value {
  font-family:    var(--font-heading);
  font-size:      var(--text-base);
  font-weight:    700;
  color:          var(--color-dark);
}


/* ============================================================================
   AWARDS STRIP
   ============================================================================ */

.awards-strip {
  /* Wood planks — JPG fallback, then WebP */
  background-color:    var(--color-barrel-dark);
  background-image:    url('../../images/wood-planks-warm.jpg');
  background-image:    url('../../images/wood-planks-warm.webp');
  background-size:     cover;
  background-position: center;
  padding-block:       clamp(2.5rem, 3vw, 4rem);
  padding-inline:      var(--container-pad);
  position:            relative;
  isolation:           isolate;
}

/* Light overlay — just enough to dull the grain without hiding it */
.awards-strip::before {
  content:        '';
  position:       absolute;
  inset:          0;
  z-index:        -1;
  background:     oklch(0.18 0.03 50 / 0.42);
  pointer-events: none;
}

.awards-strip__inner {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
  position:        relative;
  z-index:         1;
}

.awards-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
}

@media (min-width: 640px) {
  .awards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Glassmorphic card — frosted beer-glass effect */
.award-item {
  display:              flex;
  flex-direction:       column;
  align-items:          center;
  text-align:           center;
  gap:                  var(--space-3);
  padding:              var(--space-7) var(--space-6);
  border-radius:        var(--card-radius);

  position:             relative;
  overflow:             hidden;

  /* Amber bottle-glass base */
  background:           oklch(0.72 0.13 85 / 0.10);
  border:               var(--border-1) solid oklch(0.78 0.12 80 / 0.30);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.30),
    0 8px 40px oklch(0.55 0.12 45 / 0.28);

  /* The blur — what makes it actually glassy */
  backdrop-filter:         blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);

  transition:
    background      var(--duration-200) var(--ease-smooth),
    box-shadow      var(--duration-200) var(--ease-smooth),
    transform       var(--duration-200) var(--ease-smooth);
}

.award-item:hover {
  background:   oklch(1 0 0 / 0.16);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.30),
    0 12px 40px oklch(0 0 0 / 0.28);
  transform:    translateY(var(--card-lift));
}

.award-item__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  inline-size:     clamp(3.25rem, 6vw, 4rem);
  block-size:      clamp(3.25rem, 6vw, 4rem);
  font-size:       clamp(1.5rem, 3vw, 1.9rem);
  color:           var(--color-gold);
  background:      oklch(0.48 0.15 35 / 0.35);          /* rust well */
  border:          var(--border-2) solid oklch(0.72 0.13 85 / 0.55);
  border-radius:   var(--radius-full);
  filter:          drop-shadow(0 1px 2px oklch(0 0 0 / 0.45));
  -webkit-font-smoothing: antialiased;
}

.award-item__name {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  color:          var(--color-white);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height:    var(--leading-tight);
}

.award-item__event {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  color:          var(--color-amber-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.award-item__beer {
  font-size:   var(--text-sm);
  color:       var(--color-cream);
  opacity:     0.70;
  font-style:  italic;
}


/* ============================================================================
   KITCHEN FAVORITES
   ============================================================================ */

.kitchen-favorites {
  padding-block: var(--section-pad);
  background:    var(--color-surface);
}

.kitchen-favorites .container {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-pad);
}

.food-grid {
  display: grid;
  gap:     clamp(1.5rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .food-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .food-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Food card */
.food-card {
  background:    var(--color-surface);
  border-radius: var(--card-radius);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  display:       flex;
  flex-direction:column;
  transition:
    transform  var(--duration-300) var(--ease-smooth),
    box-shadow var(--duration-300) var(--ease-smooth);
}

.food-card:hover {
  transform:  translateY(var(--card-lift));
  box-shadow: var(--shadow-xl);
}

.food-card__media {
  aspect-ratio: 4 / 3;
  overflow:     hidden;
}

.food-card__media img {
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
  transition:  transform var(--duration-400) var(--ease-smooth);
}

.food-card:hover .food-card__media img {
  transform: scale(var(--media-zoom));
}

.food-card__body {
  padding:         var(--card-pad);
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-3);
  flex:            1;
}

.food-card__info {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  flex:           1;
}

.food-card__name {
  font-family:    var(--font-heading);
  font-size:      var(--type-heading);
  font-weight:    600;
  color:          var(--color-dark);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height:    var(--leading-snug);
}

.food-card__description {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-snug);
}

.food-card__price {
  font-family:    var(--font-display);
  font-size:      var(--text-2xl);
  color:          var(--color-copper);
  letter-spacing: var(--tracking-wide);
  line-height:    var(--leading-none);
  white-space:    nowrap;
  flex-shrink:    0;
}


/* ============================================================================
   PRIVATE EVENTS SECTION
   ============================================================================ */

.private-events {
  padding-block: var(--section-pad);
  background:    var(--color-surface-alt);
}

.private-events .container {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-pad);
}

.private-events__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(2.5rem, 4vw, 5rem);
  align-items:           center;
}

@media (min-width: 768px) {
  .private-events__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.private-events__image-wrapper {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  aspect-ratio:  4 / 3;
  box-shadow:    var(--shadow-xl);
}

.private-events__image-wrapper img {
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
}

/* Decorative top-left bracket */
.private-events__image-wrapper::before {
  content:               '';
  position:              absolute;
  inset-block-start:     var(--space-4);
  inset-inline-start:    var(--space-4);
  inline-size:           48px;
  block-size:            48px;
  border-inline-start:   var(--border-3) solid var(--color-amber);
  border-block-start:    var(--border-3) solid var(--color-amber);
  z-index:               var(--z-raised);
  opacity:               0.75;
}

.private-events__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.private-events__features {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  list-style:     none;
}

.private-events__feature {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  line-height: var(--leading-snug);
}

.private-events__feature i {
  color:       var(--color-amber);
  margin-block-start: 2px;
  flex-shrink: 0;
  font-size:   0.85rem;
}


/* ============================================================================
   INSTAGRAM GRID
   ============================================================================ */

.instagram-section {
  padding-block: var(--section-pad);
  background:    var(--color-surface);
}

.instagram-section .container {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-pad);
}

.instagram-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-2);
}

@media (min-width: 480px) {
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .instagram-grid { grid-template-columns: repeat(6, 1fr); }
}

.instagram-item {
  position:      relative;
  aspect-ratio:  1;
  overflow:      hidden;
  border-radius: var(--radius-md);
  display:       block;
  text-decoration: none;
}

.instagram-item img {
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
  transition:  transform var(--duration-400) var(--ease-smooth);
}

.instagram-item__overlay {
  position:        absolute;
  inset:           0;
  background:      oklch(0 0 0 / 0);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--duration-200) var(--ease-smooth);
}

.instagram-item__overlay i {
  color:     var(--color-white);
  font-size: 1.5rem;
  opacity:   0;
  transform: scale(0.8);
  transition:
    opacity   var(--duration-200) var(--ease-smooth),
    transform var(--duration-200) var(--ease-smooth);
}

.instagram-item:hover img {
  transform: scale(var(--media-zoom));
}

.instagram-item:hover .instagram-item__overlay {
  background: oklch(0 0 0 / 0.40);
}

.instagram-item:hover .instagram-item__overlay i {
  opacity:   1;
  transform: scale(1);
}

/* Hide extra items on smaller screens (show only 4 on mobile, 6 on desktop) */
.instagram-item--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .instagram-item--desktop {
    display: block;
  }
}


/* ── 1440px+: large desktop refinements ────────────────────────────────── */
@media (min-width: 1440px) {
  .instagram-grid { grid-template-columns: repeat(6, 1fr); }
  .food-grid,
  .beers-grid { gap: var(--space-8); }
}

/* ── 1280px+: desktop — grid air + private-events ratio ────────────────── */
@media (min-width: 1280px) {
  .beers-grid,
  .food-grid            { gap: var(--space-8); }
  .private-events__grid { grid-template-columns: 5fr 6fr; }
}

/* Private events intro copy (was inline) */
.private-events__copy {
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


/* ── Boundary break: story image rises out of its section at desktop ───── */
@media (min-width: 1024px) {
  .our-story__image-wrapper {
    translate:  0 calc(var(--space-12) * -1);
    box-shadow: var(--shadow-xl);
  }
}