/* ============================================================================
   IRONWOOD BREWING CO + KITCHEN — v2
   assets/css/pages/beers.css
   Beer Catalog Page Styles
   ============================================================================
   Depends on: assets/css/main.css
   HC Web Labs — hcweblabs.com — April 2026
   ============================================================================ */


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

.hero--beers {
  min-block-size: clamp(520px, 68vh, 780px);
}

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


/* ============================================================================
   TAP LIST INTRO
   ============================================================================ */

.tap-intro {
  padding-block:    clamp(3rem, 5vw, 5.5rem);
  padding-inline:   var(--container-pad);
  background:       var(--color-surface);
  border-block-end: var(--border-1) solid var(--color-border);
}

.tap-intro__inner {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
  text-align:      center;
}

.tap-intro__body {
  font-size:       var(--text-lg);
  color:           var(--color-text-muted);
  line-height:     var(--leading-relaxed);
  max-inline-size: var(--container-max-narrow);
  margin-inline:   auto;
}

/* Glassware guide strip */
.glassware-guide {
  list-style:          none;
  padding:             0;
  display:             flex;
  flex-wrap:           wrap;
  justify-content:     center;
  gap:                 var(--space-6) clamp(var(--space-8), 6vw, var(--space-16));
  margin-block-start:  clamp(2.5rem, 4vw, 4rem);
  padding-block-start: clamp(2rem, 3vw, 3rem);
  border-block-start:  var(--border-1) solid var(--color-border);
}

.glassware-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  text-align:     center;
}

.glassware-item__icon {
  font-size:  clamp(2.25rem, 4vw, 3.25rem);
  color:      var(--color-amber);
  opacity:    0.90;
  line-height:1;
}

.glassware-item__label {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    700;
  color:          var(--color-text);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

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


/* ============================================================================
   BEER CATALOG GRID
   ============================================================================ */

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

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

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

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

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

/* Full catalog beer card — more detail than homepage cards */
.catalog-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);
}

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

/* Media / image */
figure.catalog-card__media {
  position:     relative;
  aspect-ratio: 4 / 5;
  overflow:     hidden;
  background:   var(--color-barrel-dark);
  margin:       0; /* reset figure default margin */
}

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

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

/* Badges overlaid on image */
.catalog-card__badges {
  position:       absolute;
  inset-block-end:var(--space-3);
  inset-inline:   var(--space-3);
  display:        flex;
  gap:            var(--space-2);
  flex-wrap:      wrap;
}

.catalog-card__abv {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    700;
  color:          var(--color-amber);
  background:     oklch(0 0 0 / 0.75);
  padding-block:  2px;
  padding-inline: var(--space-3);
  border-radius:  var(--radius-full);
  letter-spacing: var(--tracking-wide);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Award ribbon */
.catalog-card__award {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xs);
  font-weight:    600;
  color:          var(--color-dark);
  background:     var(--color-amber);
  padding-block:  2px;
  padding-inline: var(--space-3);
  border-radius:  var(--radius-full);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  gap:            var(--space-1);
}

/* Image placeholder when no photo yet */
.catalog-card__placeholder {
  inline-size:     100%;
  block-size:      100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  color:           oklch(1 0 0 / 0.25);
  font-size:       2.5rem;
}

.catalog-card__placeholder span {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          oklch(1 0 0 / 0.20);
}

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

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

.catalog-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;
}

.catalog-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-none);
}

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

/* Tasting notes */
.catalog-card__notes {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--space-2);
}

.tasting-note {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xs);
  font-weight:    600;
  color:          var(--color-text-muted);
  background:     var(--color-surface-alt);
  border:         var(--border-1) solid var(--color-border);
  padding-block:  2px;
  padding-inline: var(--space-3);
  border-radius:  var(--radius-full);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Stats row */
.catalog-card__stats {
  display:           flex;
  gap:               var(--space-2) var(--space-7);
  padding-block-start:var(--space-4);
  border-block-start:var(--border-1) solid var(--color-border);
}

.catalog-stat {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.catalog-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;
}

.catalog-stat__value {
  font-family: var(--font-heading);
  font-size:   var(--text-base);
  font-weight: 700;
  color:       var(--color-dark);
}

/* Glassware indicator */
.catalog-card__glass {
  margin-inline-start: auto;
  display:             flex;
  flex-direction:      column;
  align-items:         center;
  gap:                 2px;
}

.catalog-card__glass-icon {
  font-size: 1.1rem;
  color:     var(--color-amber);
  opacity:   0.70;
}

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


/* ============================================================================
   SEASONAL / ROTATING SECTION
   ============================================================================ */

.seasonal-section {
  padding-block:       var(--section-pad);
  padding-inline:      var(--container-pad);
  background-color:    var(--color-barrel-char);
  background-image:    url('../../images/wood-planks-warm.jpg'); /* JPG fallback */
  background-image:    -webkit-image-set(
                         url('../../images/wood-planks-warm.webp') 1x
                       );
  background-image:    image-set(
                         url('../../images/wood-planks-warm.webp') type('image/webp'),
                         url('../../images/wood-planks-warm.jpg')  type('image/jpeg')
                       );
  background-size:     cover;
  background-position: center;
  position:            relative;
  isolation:           isolate;
}

/* Dark overlay so text stays readable over the wood grain */
.seasonal-section::before {
  content:        '';
  position:       absolute;
  inset:          0;
  z-index:        -1;
  background:     oklch(0 0 0 / 0.72);
  pointer-events: none;
}

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

.seasonal-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(1.5rem, 2.5vw, 2rem);
  margin-block-start:    clamp(2rem, 3vw, 3rem);
}

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

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

/* Seasonal card — horizontal layout on wider screens */
.seasonal-card {
  position:                relative;
  overflow:                hidden;
  background:              oklch(0.72 0.13 85 / 0.10);
  border:                  var(--border-1) solid oklch(0.78 0.12 80 / 0.30);
  border-radius:           var(--card-radius);
  padding:                 var(--space-6);
  display:                 flex;
  flex-direction:          column;
  gap:                     var(--space-4);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.30),
    0 8px 40px oklch(0.55 0.12 45 / 0.28);
  backdrop-filter:         blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  transition:
    background  var(--duration-200) var(--ease-smooth),
    box-shadow  var(--duration-200) var(--ease-smooth),
    transform   var(--duration-200) var(--ease-smooth);
}

.seasonal-card:hover {
  background: oklch(1 0 0 / 0.15);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.35),
    0 16px 48px oklch(0 0 0 / 0.32);
  transform:  translateY(var(--card-lift));
}

/* Full-bleed image at the top of the card */
.seasonal-card__media {
  margin:        calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  overflow:      hidden;
  aspect-ratio:  4 / 3;
}
.seasonal-card__media img {
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
  transition:  transform var(--duration-500) var(--ease-smooth);
}
.seasonal-card:hover .seasonal-card__media img { transform: scale(var(--media-zoom)); }
@media (prefers-reduced-motion: reduce) {
  .seasonal-card:hover .seasonal-card__media img { transform: none; }
}

.seasonal-card__label {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    600;
  color:          var(--color-amber);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
}

.seasonal-card__label::before {
  content:       '';
  display:       inline-block;
  inline-size:   8px;
  block-size:    8px;
  border-radius: var(--radius-full);
  background:    var(--color-amber);
  flex-shrink:   0;
}

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

.seasonal-card__style {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  color:          var(--color-cream);
  opacity:        0.55;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-block-start: calc(var(--space-1) * -1);
}

.seasonal-card__description {
  font-size:   var(--text-sm);
  color:       var(--color-cream);
  opacity:     0.65;
  line-height: var(--leading-relaxed);
  flex:        1;
}

.seasonal-card__meta {
  display:             flex;
  gap:                 var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start:  var(--border-1) solid oklch(1 0 0 / 0.18);
}

.seasonal-stat {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.seasonal-stat__label {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xs);
  font-weight:    600;
  color:          var(--color-amber);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display:        block;
  margin-block-end:2px;
}

.seasonal-stat__value {
  font-family: var(--font-heading);
  font-size:   var(--text-base);
  font-weight: 700;
  color:       var(--color-white);
}


/* ============================================================================
   BREWING PROCESS
   ============================================================================ */

.process-section {
  padding-block: clamp(5rem, 8vw, 8rem);
  background:    var(--color-surface);
}

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

.process-steps {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(3rem, 5vw, 5rem);
  margin-block-start:    clamp(3rem, 4vw, 4.5rem);
  counter-reset:         step-counter;
}

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

@media (min-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(3rem, 5vw, 6rem);
  }
}

.process-step {
  display:           flex;
  flex-direction:    column;
  gap:               var(--space-5);
  counter-increment: step-counter;
}

.process-step__number {
  font-family:    var(--font-display);
  font-size:      var(--text-5xl);
  color:          var(--color-border);
  letter-spacing: var(--tracking-wide);
  line-height:    var(--leading-none);
  position:       relative;
}

/* Amber underline on the step number */
.process-step__number::after {
  content:            '';
  position:           absolute;
  inset-block-end:    -4px;
  inset-inline-start: 0;
  inline-size:        40px;
  block-size:         3px;
  background:         var(--gradient-copper-amber);
  border-radius:      var(--radius-full);
}

.process-step__title {
  font-family:        var(--font-heading);
  font-size:          var(--text-lg);
  font-weight:        600;
  color:              var(--color-dark);
  letter-spacing:     var(--tracking-wide);
  text-transform:     uppercase;
  margin-block-start: var(--space-4);
}

.process-step__body {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


/* ============================================================================
   BARREL RESERVE SERIES
   ============================================================================ */

.barrel-reserve {
  position:      relative;
  isolation:     isolate;
  overflow:      hidden;
  padding-block: var(--space-16);
  background:    var(--color-barrel-char);
}

/* Wood-texture background with dark overlay */
.barrel-reserve__bg {
  position:            absolute;
  inset:               0;
  z-index:             -1;
  background-color:    var(--color-barrel-dark);
  background-image:    url('../../images/wood-vertical-grain.webp');
  background-size:     cover;
  background-position: center;
}
.barrel-reserve__bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    oklch(0.18 0.03 50 / 0.88) 0%,
    oklch(0.18 0.03 50 / 0.72) 100%
  );
}

.barrel-reserve__inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-10);
  align-items:           center;
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.barrel-reserve__eyebrow {
  display:          block;
  font-family:      var(--font-heading);
  font-size:        var(--text-xs);
  font-weight:      600;
  letter-spacing:   var(--tracking-widest);
  text-transform:   uppercase;
  color:            var(--color-amber);
  margin-block-end: var(--space-3);
}
.barrel-reserve__title {
  font-family:      var(--font-display);
  font-size:        var(--type-title);
  color:            var(--color-cream);
  letter-spacing:   var(--tracking-wide);
  text-transform:   uppercase;
  line-height:      var(--leading-none);
  margin-block-end: var(--space-4);
}
.barrel-reserve__body {
  font-size:        var(--text-lg);
  color:            oklch(0.96 0.01 85 / 0.75);
  line-height:      var(--leading-relaxed);
  margin-block-end: var(--space-5);
  max-inline-size:  56ch;
}
.barrel-reserve__notes {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3);
  margin-block-end: var(--space-6);
}
.barrel-reserve__notes li {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  font-family:    var(--font-heading);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          oklch(0.96 0.01 85 / 0.85);
}
.barrel-reserve__notes i {
  color:        var(--color-amber);
  inline-size:  20px;
  text-align:   center;
  flex-shrink:  0;
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.barrel-reserve__gallery {
  position: relative;
}
.barrel-reserve__figure {
  overflow:      hidden;
  border-radius: var(--card-radius);
  box-shadow:    0 20px 60px oklch(0 0 0 / 0.55);
}
.barrel-reserve__figure img {
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
  display:     block;
}
.barrel-reserve__figure--main {
  aspect-ratio: 5 / 6;
  border:       var(--border-2) solid oklch(0.68 0.15 75 / 0.30);
}
/* Inset image hidden on small screens, shown as overlap at 640px+ */
.barrel-reserve__figure--inset {
  display: none;
}

/* ── 640px+: inset overlap appears ────────────────────────────────────────── */
@media (min-width: 640px) {
  .barrel-reserve__gallery {
    padding-block-end: var(--space-12);
    padding-inline-end: var(--space-12);
  }
  .barrel-reserve__figure--inset {
    display:            block;
    position:           absolute;
    inset-block-end:    0;
    inset-inline-end:   0;
    inline-size:        44%;
    aspect-ratio:       5 / 6;
    border:             var(--border-2) solid var(--color-barrel-char);
    box-shadow:         0 16px 48px oklch(0 0 0 / 0.65);
  }
}

/* ── 1024px+: two columns, content beside gallery ─────────────────────────── */
@media (min-width: 1024px) {
  .barrel-reserve__inner {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-16);
  }
  .barrel-reserve__title { font-size: var(--text-5xl); }
}


/* ── 1440px+: large desktop refinements ────────────────────────────────── */
@media (min-width: 1440px) {
  .catalog-grid,
  .seasonal-grid { gap: var(--space-8); }
  .barrel-reserve__inner { gap: var(--space-16); }
}

/* ── 480px+: large phones — tighter glassware wrap ─────────────────────── */
@media (min-width: 480px) {
  .glassware-guide { gap: var(--space-6) var(--space-10); }
}

/* ── 768px+: tablets — deeper barrel overlap, spread glassware ─────────── */
@media (min-width: 768px) {
  .barrel-reserve__gallery { padding-inline-end: var(--space-16); }
  .glassware-guide         { justify-content: space-between; }
}

/* ── 1280px+: desktop — refined barrel ratio, roomier catalog ──────────── */
@media (min-width: 1280px) {
  .barrel-reserve__inner { grid-template-columns: 6fr 5fr; }
  .catalog-grid          { gap: var(--space-8); }
}