/* ─── frw-pages.css ─── */
/* Page-specific overrides and unique layouts */

/* ─── Home: Hero Visual ─── */
.frw-hero__visual-wrap {
  position: relative;
  height: 520px;
  border-radius: var(--frw-radius-asset);
  overflow: hidden;
  background: var(--frw-dark-alt);
}

.frw-hero__visual-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--frw-radius-asset);
}

/* Accent glow behind hero visual */
.frw-hero__visual-wrap::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 60% 50%, rgba(245,166,35,0.15) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Home: Asset Showcase ─── */
.frw-showcase {
  text-align: center;
}

.frw-showcase__header {
  margin-bottom: 48px;
}

/* ─── Product: Format Grid SVG ─── */
.frw-format-svg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: end;
}

.frw-format-svg-tile {
  background: var(--frw-white);
  border: 1px solid var(--frw-border-light);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 6px 8px;
}

.frw-format-svg-tile__inner {
  width: 100%;
  background: var(--frw-light);
  border-radius: 4px;
}

.frw-format-svg-tile__accent {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 7px;
  height: 7px;
  background: var(--frw-accent);
  border-radius: 2px;
  z-index: 1;
}

.frw-format-svg-tile__label {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.6rem;
  line-height: 1.4;
  color: var(--frw-fg-light-2);
  text-align: center;
  margin-top: 6px;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ─── Digital Advertising Format Tiles ─── */
.frw-ad-format-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}

/* ─── Pricing: Annual pricing display ─── */
.frw-pricing-card__annual-note {
  font-size: 0.8125rem;
  color: var(--frw-accent-aa-light);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
  display: block;
}

.frw-pricing-card--featured .frw-pricing-card__annual-note {
  color: var(--frw-accent);
}

/* ─── Blog index hero stat ─── */
.frw-blog-index-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.frw-blog-index-meta span {
  font-size: 0.875rem;
  color: var(--frw-fg-light-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.frw-blog-index-meta i {
  color: var(--frw-accent-aa-light);
}

/* ─── Blog Article Header ─── */
.frw-article-header {
  background: var(--frw-light);
  padding-top: 120px;
  padding-bottom: 48px;
}

.frw-article-header__inner {
  max-width: var(--frw-container);
  margin: 0 auto;
  padding: 0 24px;
}

.frw-article-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--frw-fg-light-2);
  margin-bottom: 24px;
  transition: color 0.15s;
  text-decoration: none;
}

.frw-article-header__back:hover {
  color: var(--frw-fg-light-1);
}

.frw-article-header__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.frw-article-header__category {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--frw-accent-aa-light);
  background: rgba(192,127,0,0.08);
  border: 1px solid rgba(192,127,0,0.18);
  padding: 4px 10px;
  border-radius: var(--frw-radius-pill);
}

.frw-article-header__date {
  font-size: 0.875rem;
  color: var(--frw-fg-light-2);
}

.frw-article-header h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--frw-fg-light-1);
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 760px;
}

.frw-article-header__excerpt {
  font-size: 1.0625rem;
  color: var(--frw-fg-light-2);
  line-height: 1.65;
  max-width: 640px;
}

/* Article body section */
.frw-article-body-section {
  background: var(--frw-white);
  padding: 64px 0;
}

/* Article related posts */
.frw-article-related {
  background: var(--frw-light);
  padding: 64px 0;
}

.frw-article-related__inner {
  max-width: var(--frw-container);
  margin: 0 auto;
  padding: 0 24px;
}

.frw-article-related h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--frw-fg-light-1);
  margin-bottom: 32px;
}

/* ─── Login: Logo-only header ─── */
.frw-auth-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px clamp(24px, 8vw, 80px);
  display: flex;
  align-items: center;
}

.frw-auth-header--dark {
  background: transparent;
}

.frw-auth-header--light {
  background: transparent;
}

.frw-auth-header__logo img {
  height: 28px;
  width: auto;
}

/* ─── IAB format tile dimensions (using padding-bottom trick for aspect ratio) ─── */
/* Tiles proportioned to real aspect ratios */

/* 300x250 = 6:5 */
.frw-ad-tile--rect .frw-format-svg-tile__inner { padding-bottom: 83%; }
/* 728x90 = very wide */
.frw-ad-tile--leader .frw-format-svg-tile__inner { padding-bottom: 12%; }
/* 160x600 = tall */
.frw-ad-tile--sky .frw-format-svg-tile__inner { padding-bottom: 375%; }
/* 300x600 = 1:2 */
.frw-ad-tile--halfpage .frw-format-svg-tile__inner { padding-bottom: 200%; }
/* 320x50 */
.frw-ad-tile--mobile .frw-format-svg-tile__inner { padding-bottom: 16%; }
/* 970x90 */
.frw-ad-tile--billboard .frw-format-svg-tile__inner { padding-bottom: 9%; }
/* 1200x628 */
.frw-ad-tile--social .frw-format-svg-tile__inner { padding-bottom: 52%; }

/* Product format tiles aspect ratios */
/* Instagram Story 9:16 */
.frw-fmt--story .frw-format-svg-tile__inner { padding-bottom: 178%; }
/* Instagram Feed 1:1 */
.frw-fmt--square .frw-format-svg-tile__inner { padding-bottom: 100%; }
/* Facebook Banner 1200x630 ~2:1 */
.frw-fmt--fbanner .frw-format-svg-tile__inner { padding-bottom: 53%; }
/* LinkedIn 1200x627 */
.frw-fmt--linkedin .frw-format-svg-tile__inner { padding-bottom: 52%; }
/* Twitter 1500x500 = 3:1 */
.frw-fmt--twitter .frw-format-svg-tile__inner { padding-bottom: 33%; }
/* Google Display 300x250 */
.frw-fmt--gdisplay .frw-format-svg-tile__inner { padding-bottom: 83%; }
/* Google Leaderboard 728x90 */
.frw-fmt--gleader .frw-format-svg-tile__inner { padding-bottom: 12%; }
/* YouTube Thumb 1280x720 = 16:9 */
.frw-fmt--youtube .frw-format-svg-tile__inner { padding-bottom: 56%; }
/* Email Header 600x200 = 3:1 */
.frw-fmt--email .frw-format-svg-tile__inner { padding-bottom: 33%; }
/* OG Image 1200x630 */
.frw-fmt--og .frw-format-svg-tile__inner { padding-bottom: 53%; }

/* ─── Sub-page hero actions ─── */
.frw-subhero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ─── Nav logo—only standalone ─── */
.frw-nav--logo-only .frw-nav__links,
.frw-nav--logo-only .frw-nav__actions,
.frw-nav--logo-only .frw-nav__hamburger {
  display: none;
}

/* ─── Responsive page overrides ─── */
@media (max-width: 1024px) {
  .frw-format-svg-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .frw-ad-format-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .frw-format-svg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .frw-ad-format-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .frw-hero__visual-wrap {
    height: 280px;
  }
}