/* ============================================================================
   IRONWOOD BREWING CO + KITCHEN — v2
   assets/css/pages/gift-cards.css
   Gift Cards Page Styles
   ============================================================================
   Depends on: assets/css/main.css
   HC Web Labs — hcweblabs.com — April 2026
   ============================================================================ */


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

.hero--gift-cards {
  min-block-size:   clamp(460px, 60vh, 660px);
}

.hero--gift-cards .hero__bg {
  background-image:    url('https://cdn.pixabay.com/photo/2015/09/24/20/36/beer-barrel-956322_1280.jpg');
  background-position: center 55%;
}


/* ============================================================================
   GIFT CARD PAGE LAYOUT
   ============================================================================ */

.gift-card-page {
  padding-block: var(--section-pad);
  background:    var(--color-surface-alt);
}

.gift-card-page .container {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-pad);
}

.gift-card-layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(2.5rem, 4vw, 5rem);
  align-items:           start;
}

@media (min-width: 1024px) {
  .gift-card-layout {
    grid-template-columns: 5fr 4fr;
  }
}


/* ============================================================================
   GIFT CARD VISUAL
   ============================================================================ */

.gift-card-visual {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
  position:       sticky;
  inset-block-start: calc(var(--header-height) + var(--space-6));
}

/* The card itself */
.gift-card {
  position:      relative;
  aspect-ratio:  85.6 / 53.98; /* Standard credit card ratio */
  border-radius: var(--radius-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-2xl), var(--shadow-copper);
  background-color: var(--color-barrel-dark);
  background-image:
    repeating-linear-gradient(
      88deg,
      var(--color-barrel-char)  0%,
      var(--color-barrel-dark)  25%,
      var(--color-barrel)       50%,
      var(--color-barrel-dark)  75%,
      var(--color-barrel-char)  100%
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      oklch(0 0 0 / 0.025) 2px,
      oklch(0 0 0 / 0.025) 4px
    );
  transition: transform var(--duration-300) var(--ease-smooth);
}

.gift-card:hover {
  transform: rotate(-1deg) scale(1.02);
}

/* Amber gradient shimmer overlay */
.gift-card::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    135deg,
    oklch(0.68 0.15 75 / 0.15) 0%,
    transparent                  40%,
    oklch(0.55 0.12 45 / 0.10) 100%
  );
  z-index: var(--z-raised);
}

/* Bottom amber bar */
.gift-card::after {
  content:           '';
  position:          absolute;
  inset-block-end:   0;
  inset-inline:      0;
  block-size:        6px;
  background:        var(--gradient-copper-amber);
  z-index:           var(--z-dropdown);
}

.gift-card__content {
  position:   absolute;
  inset:      0;
  z-index:    var(--z-dropdown);
  padding:    clamp(1.25rem, 4vw, 2rem);
  display:    flex;
  flex-direction: column;
  justify-content:space-between;
}

.gift-card__brand {
  font-family:    var(--font-display);
  font-size:      clamp(1.4rem, 4vw, 2.2rem);
  color:          var(--color-amber);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height:    var(--leading-none);
  text-shadow:    0 2px 8px oklch(0 0 0 / 0.40);
}

.gift-card__tagline {
  font-family:    var(--font-heading);
  font-size:      clamp(0.5rem, 1.2vw, 0.7rem);
  color:          var(--color-cream);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity:        0.65;
  margin-block-start: 3px;
}

.gift-card__amount {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 7vw, 3.5rem);
  color:          var(--color-white);
  letter-spacing: var(--tracking-wide);
  line-height:    var(--leading-none);
  text-shadow:    0 2px 12px oklch(0 0 0 / 0.50);
  text-align:     end;
  transition:     all var(--duration-200) var(--ease-smooth);
}

.gift-card__amount--placeholder {
  opacity: 0.30;
  font-size: clamp(1.2rem, 4vw, 2rem);
}

/* Benefits list below the card */
.gift-card-benefits {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.gift-card-benefit {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
}

.gift-card-benefit i {
  color:      var(--color-amber);
  font-size:  0.85rem;
  flex-shrink:0;
}


/* ============================================================================
   GIFT CARD PURCHASE FORM
   ============================================================================ */

.gift-card-form-wrapper {
  background:    var(--color-surface);
  border-radius: var(--card-radius);
  border:        var(--border-1) solid var(--color-border);
  overflow:      hidden;
}

.gift-card-form-header {
  padding:          var(--space-5) var(--space-6);
  border-block-end: var(--border-1) solid var(--color-border);
  background:       var(--color-surface-alt);
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
}

.gift-card-form-header__icon {
  inline-size:     40px;
  block-size:      40px;
  border-radius:   var(--radius-md);
  background:      var(--gradient-copper-amber);
  color:           var(--color-white);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  flex-shrink:     0;
}

.gift-card-form-header__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-base);
  font-weight:    700;
  color:          var(--color-dark);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.gift-card-form {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap:     var(--space-5);
}

/* Amount selection */
.amount-section-label {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    700;
  color:          var(--color-text-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  display:        block;
  margin-block-end: var(--space-3);
}

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

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

.amount-btn {
  padding-block:   var(--space-3);
  font-family:     var(--font-display);
  font-size:       var(--text-xl);
  letter-spacing:  var(--tracking-wide);
  color:           var(--color-text-muted);
  background:      var(--color-surface-alt);
  border:          var(--border-2) solid var(--color-border);
  border-radius:   var(--radius-md);
  cursor:          pointer;
  text-align:      center;
  transition:      all var(--duration-150) var(--ease-smooth);
}

.amount-btn:hover {
  color:        var(--color-copper);
  border-color: var(--color-copper);
  background:   oklch(0.55 0.12 45 / 0.05);
}

.amount-btn.is-active {
  color:        var(--color-white);
  background:   var(--gradient-copper-amber);
  border-color: transparent;
  box-shadow:   var(--shadow-copper);
}

/* Custom amount row */
.custom-amount-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-block-start: var(--space-2);
}

.custom-amount-prefix {
  font-family:    var(--font-display);
  font-size:      var(--text-2xl);
  color:          var(--color-copper);
  letter-spacing: var(--tracking-wide);
  line-height:    1;
  flex-shrink:    0;
}

.custom-amount-input {
  flex:           1;
  padding-block:  var(--space-3);
  padding-inline: var(--space-4);
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  letter-spacing: var(--tracking-wide);
  color:          var(--color-dark);
  background:     var(--color-surface-alt);
  border:         var(--border-2) solid var(--color-border);
  border-radius:  var(--radius-md);
  min-block-size: var(--min-touch);
  transition:
    border-color var(--duration-150) var(--ease-smooth),
    box-shadow   var(--duration-150) var(--ease-smooth);
}

.custom-amount-input:focus {
  outline:      none;
  border-color: var(--color-amber);
  box-shadow:   0 0 0 3px oklch(0.68 0.15 75 / 0.18);
}

.custom-amount-input::placeholder {
  opacity: 0.35;
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: normal;
}

/* Delivery method toggle */
.delivery-toggle {
  display:       flex;
  gap:           var(--space-2);
  background:    var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding:       var(--space-1);
  border:        var(--border-1) solid var(--color-border);
}

.delivery-toggle-btn {
  flex:            1;
  padding-block:   var(--space-2);
  font-family:     var(--font-heading);
  font-size:       var(--text-xs);
  font-weight:     600;
  letter-spacing:  var(--tracking-wider);
  text-transform:  uppercase;
  color:           var(--color-text-muted);
  background:      transparent;
  border:          none;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  transition:
    color      var(--duration-150) var(--ease-smooth),
    background var(--duration-150) var(--ease-smooth),
    box-shadow var(--duration-150) var(--ease-smooth);
}

.delivery-toggle-btn.is-active {
  background: var(--color-surface);
  color:      var(--color-copper);
  box-shadow: var(--shadow-sm);
}

.delivery-toggle-btn i { font-size: 0.8rem; }

/* Print-at-home note */
.print-note {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--color-info-bg);
  border:        var(--border-1) solid var(--color-info);
  border-radius: var(--radius-md);
  font-size:     var(--text-xs);
  color:         var(--color-dark);
  line-height:   var(--leading-relaxed);
}

.print-note i {
  color:      var(--color-info);
  flex-shrink:0;
  margin-block-start: 1px;
}

/* Payment mockup notice */
.payment-notice {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--color-warning-bg);
  border:        var(--border-1) solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size:     var(--text-xs);
  color:         var(--color-dark);
  line-height:   var(--leading-relaxed);
}

.payment-notice i {
  color:      var(--color-warning);
  flex-shrink:0;
  margin-block-start: 1px;
}

/* Success state */
.gift-card-success {
  display:         none;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         var(--space-12) var(--space-6);
  gap:             var(--space-4);
}

.gift-card-success.is-visible {
  display: flex;
}

.gift-card-success__icon {
  font-size: 3.5rem;
  color:     var(--color-success);
}

.gift-card-success__title {
  font-family:    var(--font-display);
  font-size:      var(--text-3xl);
  color:          var(--color-copper);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.gift-card-success__body {
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-inline-size: 360px;
}


/* ============================================================================
   HOW IT WORKS SECTION
   ============================================================================ */

.how-it-works {
  padding-block:  clamp(3rem, 4vw, 5rem);
  padding-inline: var(--container-pad);
  background:     var(--color-surface);
}

.how-it-works__inner {
  max-inline-size: var(--container-max);
  margin-inline:   auto;
}

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

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

.how-step {
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
}

.how-step__num {
  inline-size:     56px;
  block-size:      56px;
  border-radius:   var(--radius-full);
  background:      var(--gradient-copper-amber);
  color:           var(--color-white);
  font-family:     var(--font-display);
  font-size:       var(--text-2xl);
  letter-spacing:  var(--tracking-wide);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-copper);
}

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

.how-step__body {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-inline-size: 240px;
}


/* ── 1440px+: large desktop refinements ────────────────────────────────── */
@media (min-width: 1440px) {
  .gift-card-layout { gap: clamp(4rem, 5vw, 6rem); }
}

/* ── 768px+: tablets — form and preview go side-by-side early ──────────── */
@media (min-width: 768px) {
  .gift-card-layout {
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(3rem, 4vw, 4rem);
  }
}

/* ── 1280px+: desktop — wider gutter ───────────────────────────────────── */
@media (min-width: 1280px) {
  .gift-card-layout { gap: clamp(4rem, 5vw, 5rem); }
}

/* Form label note + centered hint (were inline) */
.form-label__note {
  opacity:        0.55;
  font-weight:    400;
  letter-spacing: normal;
  text-transform: none;
}
.form-hint--center { text-align: center; }