/* ════════════════════════════════════════════════════════════════
   sf-event.css  —  San Francisco 2026 / Sotheby's 50th Anniversary
   Network section event feature styles.

   LOAD ORDER: this file is listed LAST in index.html <head>, after
   style.css, luxury-refinement.css, and stability-fix.css.
   Last-wins cascade + !important on every color rule = guaranteed
   override of any broader body/p/h3 color cascade from other sheets.

   Scope: .net-event-* classes only. Zero effect on any other section.
════════════════════════════════════════════════════════════════ */

/* ── Divider ─────────────────────────────────────────────────── */
.net-event-divider {
  max-width: 1320px;
  margin: 0 auto 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.net-event-divider::before,
.net-event-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(8,145,178,0.45), transparent);
}
.net-event-divider-label {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #45D9E8 !important;
  white-space: nowrap;
  /* Undo any inherited max-width from luxury-refinement p {} */
  max-width: none !important;
  display: inline !important;
}

/* ── Feature card shell ──────────────────────────────────────── */
.net-event-card {
  max-width: 1320px;
  margin: 0 auto 52px;
  padding: 0 24px;
}
.net-event-card-inner {
  background: linear-gradient(135deg,
    rgba(8,145,178,0.1) 0%,
    rgba(7,24,40,0.6) 50%,
    rgba(8,145,178,0.06) 100%) !important;
  border: 1px solid rgba(8,145,178,0.38) !important;
  border-radius: 16px;
  padding: 56px 60px;
  position: relative;
  overflow: hidden;
}
.net-event-card-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 240px; height: 3px;
  background: linear-gradient(to right, #0891b2, transparent);
}
.net-event-card-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 180px;
  background: linear-gradient(to bottom, #0891b2, transparent);
}

/* ── Badge row ───────────────────────────────────────────────── */
.net-event-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.net-event-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #45D9E8 !important;
  background: rgba(8,145,178,0.12) !important;
  border: 1px solid rgba(8,145,178,0.38) !important;
  border-radius: 4px;
  padding: 7px 16px;
  /* Kill luxury-refinement p max-width if badge renders as block */
  max-width: none !important;
}
.net-event-badge.net-event-badge-year {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.82) !important;
}

/* ── Headline ────────────────────────────────────────────────── */
.net-event-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.7rem, 3.2vw, 2.75rem) !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  line-height: 1.22 !important;
  margin: 0 0 10px !important;
  max-width: 820px !important;
  /* Undo text-rendering from luxury-refinement — keep it */
  text-rendering: optimizeLegibility;
}
.net-event-headline em {
  color: #45D9E8 !important;
  font-style: italic !important;
}

/* ── Sub-headline ────────────────────────────────────────────── */
/* NOTE: this is a <p> element — luxury-refinement sets p { max-width: 68ch }
   We must override both color AND max-width */
p.net-event-subhead {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #45D9E8 !important;
  margin: 0 0 36px !important;
  max-width: none !important;
  line-height: 1.5 !important;
}

/* ── Gold rule ───────────────────────────────────────────────── */
.net-event-rule {
  width: 64px !important;
  height: 2px !important;
  background: linear-gradient(to right, #0891b2, rgba(8,145,178,0.5)) !important;
  border: none !important;
  margin: 0 0 36px !important;
}

/* ── Body paragraphs ─────────────────────────────────────────── */
/* Tag-qualified selector: higher specificity than bare p {} */
p.net-event-body {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 0.97rem !important;
  line-height: 1.9 !important;
  color: #E5EDF5 !important;
  max-width: 860px !important;
  margin: 0 0 20px !important;
}
p.net-event-body:last-of-type {
  margin-bottom: 0 !important;
}

/* ── Closing statement ───────────────────────────────────────── */
.net-event-closing {
  margin-top: 40px !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(8,145,178,0.22) !important;
  text-align: center !important;
}
p.net-event-closing-text {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em !important;
  max-width: none !important;
  line-height: 1.6 !important;
}

/* ── Gallery section header ──────────────────────────────────── */
.net-event-gallery-header {
  max-width: 1320px;
  margin: 0 auto 28px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.net-event-gallery-title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #45D9E8 !important;
  white-space: nowrap;
  max-width: none !important;
  display: inline !important;
}
.net-event-gallery-rule {
  flex: 1;
  height: 1px;
  background: rgba(8,145,178,0.25);
}

/* ── Gallery wrap ────────────────────────────────────────────── */
.net-event-gallery-wrap {
  max-width: 1320px;
  margin: 0 auto 16px;
  padding: 0 24px;
}

/* ── Existing gallery label ──────────────────────────────────── */
.net-existing-gallery-header {
  max-width: 1320px;
  margin: 64px auto 28px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.net-existing-gallery-title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  white-space: nowrap;
  max-width: none !important;
  display: inline !important;
}
.net-existing-gallery-rule {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .net-event-card-inner { padding: 44px 40px !important; }
}
@media (max-width: 768px) {
  .net-event-card-inner {
    padding: 36px 28px !important;
  }
  .net-event-card-inner::before { width: 140px; }
  .net-event-card-inner::after  { height: 110px; }
  .net-event-badge-row { gap: 8px; }
  .net-event-closing {
    margin-top: 28px !important;
    padding-top: 24px !important;
  }
  .net-event-gallery-wrap .net-gallery { columns: 2; }
  .net-event-gallery-wrap .ng-item:nth-child(n+5) { display: none; }
}
@media (max-width: 480px) {
  .net-event-card-inner { padding: 28px 20px !important; }
  .net-event-gallery-wrap .net-gallery { columns: 1; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS FIXES — My Network section
   Targets: section-network on index.html at ≤ 768px / ≤ 480px
   Load order: sf-event.css loads last, so these win the cascade.
════════════════════════════════════════════════════════════════ */

/* ── FIX 1: reveal-up blank spaces ──────────────────────────────
   On mobile the IntersectionObserver threshold (12%) is never met
   for tall containers (stats row, card grid), so they stay at
   opacity:0 indefinitely — producing large blank regions.
   Solution: force all reveal-up elements immediately visible on
   mobile. The scroll animation is a desktop enhancement only.
   Extended to 900px to cover iPad portrait.
──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .section-network .reveal-up,
  .section-network .reveal-left,
  .section-network .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── FIX 2: stats row — horizontal overflow ──────────────────────
   The inline stats div uses flex-wrap:nowrap, forcing 5 items into
   one row on any screen width — statistics clip off-screen on iPhone.
   .net-stats-inline class added to the div for clean targeting.
   Extended to 900px for iPad portrait.
──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .net-stats-inline {
    flex-wrap: wrap !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 20px 16px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    margin-bottom: 44px !important;
  }
  /* Remove right-border dividers between items on mobile */
  .net-stats-inline > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    padding: 16px 12px !important;
  }
  /* Odd item in last row (5th of 5) spans full width for balance */
  .net-stats-inline > div:nth-child(5) {
    grid-column: 1 / -1 !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
  }
  /* 4th item — no bottom border (it's above the spanning 5th) */
  .net-stats-inline > div:nth-child(4) {
    border-bottom: none !important;
  }
}

/* ── FIX 3: section padding + card grids on mobile ───────────────
   100px top padding and multi-column card grids are desktop-only
   features that create excessive spacing and overflow on iPhone.
   Classes: .net-machine-wrap, .net-brand-row, .net-power-cards
   Extended to 900px for iPad portrait.
──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Section top/bottom padding */
  .section-network { padding: 56px 0 48px !important; }

  /* net-header margin reduction */
  .net-header { margin-bottom: 36px !important; }

  /* Outer wrapper: reduce side padding on mobile */
  .net-machine-wrap { padding: 0 16px 32px !important; }

  /* Row 1 brand card: 2-col → 1-col stacked */
  .net-brand-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 24px !important;
  }

  /* Row 2 power cards: 3-col → 1-col */
  .net-power-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Reduce over-tall spacing above SF event divider */
  .net-event-divider { margin-bottom: 32px !important; }
}

@media (max-width: 480px) {
  /* Section padding on small phones */
  .section-network { padding: 44px 0 36px !important; }

  /* Brand card tighter padding */
  .net-brand-row { padding: 22px 18px !important; }
}

/* ── GLOBAL: disable reveal animations on mobile ─────────────────
   The IntersectionObserver in main.js uses threshold:0.12 + rootMargin
   -40px. On iPhone/iPad, tall elements (about section columns, why-cards)
   can fail to cross the 12% threshold before the user scrolls past them,
   creating blank spaces throughout the page.
   Solution: on ≤900px, all reveal-up/left/right elements are shown
   immediately. Scroll animations are a desktop enhancement only.
   This selector is broader than the section-network fix above — it covers
   the hero, about section, why-carla cards, and any future sections.
──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Ensure .visible state also has no lingering transform */
  .reveal-up.visible,
  .reveal-left.visible,
  .reveal-right.visible {
    opacity: 1 !important;
    transform: none !important;
  }
}