/* ============================================================
   free-licence.css — free-licence.html ONLY  (style.css first)

   Sections:
   1. Page hero — bold blue headline
   2. Open-source assets — 3-col icon+title+desc grid
   3. Back link license — 3-col with vertical dividers
   4. How to Attribute — 3-col + 2-col
   5. You can't — plain text
   6. CTA — Send a Message button
   ============================================================ */

/* ── 1. PAGE HERO ──────────────────────────────────────────
   Screenshot: white bg, very large bold BLUE headline,
   centred, no image — typography only.
   ──────────────────────────────────────────────────────── */
.fl-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
}
.fl-hero__title {
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin-inline: auto;
  text-transform: uppercase;

  /* 🎨 GRADIENT TEXT */
  background: linear-gradient(90deg, #6936E6 0%, #0094FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 2. OPEN-SOURCE ASSETS ─────────────────────────────── 
   Screenshot: centred title + subtitle, then 3 equal cols:
   Circle icon (outlined, gold/amber stroke) · ALL CAPS title · desc
   ──────────────────────────────────────────────────────── */
.fl-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-pink);
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 0.6rem;
}
.fl-section-sub {
  font-size: 14px;
  color: var(--clr-muted);
  text-align: center;
  line-height: 1.2;
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: 80px;
  color: black;
}

/* 3-col icon grid */
.fl-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.fl-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Circle outlined icon wrapper */
.fl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
/* Icon for specific items */

.fl-icon-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clr-text);
  margin-top: 20px;
}
.fl-icon-desc {
  font-size: 14px;
  color: var(--clr-muted);
  text-align: center;
  line-height: 1.4;
}

/* ── 3. BACK LINK LICENSE — 3-col with dividers ────────── 
   Screenshot: thin vertical dividers between cols,
   icon is different (document/file icon style, not circle)
   ──────────────────────────────────────────────────────── */
.fl-divider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.fl-divider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.fl-divider-item:last-child { border-right: none; }

/* ── 4. HOW TO ATTRIBUTE — 3-col then 2-col ─────────────── 
   Screenshot: 3 items (Website, Desktop, Mobile) then
   below: 2 items (Social Media, Print Media), centred.
   ──────────────────────────────────────────────────────── */
.fl-attr-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 50px;
}
.fl-attr-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 100px; /* 👈 THIS FIX */
  column-gap: 2rem;
  row-gap: 50px;
  max-width: 600px;
  margin-inline: auto;
}
.fl-attr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.fl-attr-item:last-child { border-right: none; }

/* ── 5. YOU CAN'T + CTA ─────────────────────────────────── */
.fl-cant {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--clr-border);
}
.fl-cant__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.fl-cant__text {
  font-size: 0.88rem;
  color: var(--clr-muted);
  line-height: 1.7;
  max-width: 820px;
  margin-bottom: 2rem;
}
.fl-cant__q {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .fl-icon-grid       { grid-template-columns: 1fr; }
  .fl-divider-grid    { grid-template-columns: 1fr; }
  .fl-attr-grid-3     { grid-template-columns: 1fr; }
  .fl-attr-grid-2     { grid-template-columns: 1fr; max-width: 100%; }

  .fl-divider-item,
  .fl-attr-item       { border: none; }

  .fl-hero__title     { font-size: 1.9rem; }
}