/*
 * gm-responsive.css
 * Growth Mentality — Sistema de responsividade
 *
 * Colocar em: public/css/gm-responsive.css
 * Incluir no layout DEPOIS do styles.css existente:
 *   <link rel="stylesheet" href="{{ asset('css/gm-responsive.css') }}">
 *
 * Remover o script de zoom do site.blade.php após incluir este ficheiro.
 *
 * Breakpoints:
 *   --desktop  : > 1024px
 *   --tablet   : 768px – 1024px
 *   --mobile   : < 768px
 */

/* ══════════════════════════════════════════════════════════════════════════
   BASE — substituir o #stage fixo e o script de zoom
══════════════════════════════════════════════════════════════════════════ */

#stage {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA FLUIDA — font-size escalada com clamp()
══════════════════════════════════════════════════════════════════════════ */

/* H1 hero (106px → 48px) */
.gm-h1-hero {
  font-size: clamp(48px, 7.5vw, 106px) !important;
}

/* H1 página (88px → 40px) */
.gm-h1-page {
  font-size: clamp(40px, 6vw, 88px) !important;
}

/* H2 secção (72px → 36px) */
.gm-h2 {
  font-size: clamp(36px, 5vw, 72px) !important;
}

/* H2 médio (56px → 28px) */
.gm-h2-md {
  font-size: clamp(28px, 4vw, 56px) !important;
}

/* Estatísticas (54px → 32px) */
.gm-stat {
  font-size: clamp(32px, 4vw, 54px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CAMPOS DE FORMULÁRIO
══════════════════════════════════════════════════════════════════════════ */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5d5d60;
  display: block;
  margin-bottom: 4px;
}

.input {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #1d1f20;
  background: #ffffff;
  border: 1px solid rgba(125, 194, 65, 0.55);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: block;
}

.input:focus {
  border-color: #7DC241;
  box-shadow: 0 0 0 3px rgba(125, 194, 65, 0.12);
}

.input::placeholder {
  color: #b0b0b3;
}

textarea.input {
  resize: none;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET — 768px a 1024px
══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Header ── */
  header[style*="padding:0 72px"] {
    padding: 0 32px !important;
  }

  /* Nav: esconder links, manter botão contacto */
  header nav > a:not([style*="background:#7DC241"]) {
    display: none !important;
  }

  /* ── Padding horizontal das secções ── */
  [style*="padding:96px 100px"],
  [style*="padding:88px 100px"],
  [style*="padding:80px 100px"],
  [style*="padding:72px 100px"],
  [style*="padding:64px 100px"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  [style*="padding:0 100px"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Margem lateral dos banners CTA */
  [style*="margin:0 100px"] {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }

  /* ── Hero home: empilhar coluna de texto + descrição ── */
  [style*="justify-content:space-between"][style*="align-items:flex-end"][style*="gap:60px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* ── Grids de 3 colunas → 2 colunas ── */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Grid de 4 colunas → 2 colunas ── */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Grid 2 colunas de quem somos / contacto ── */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ── Cards largos de serviços e team ── */
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns:1.6fr 1fr"],
  [style*="grid-template-columns:400px 1fr"],
  [style*="grid-template-columns:1fr 400px"] {
    grid-template-columns: 1fr !important;
  }

  /* Colunas de cor/imagem nos cards largos: altura fixa em tablet */
  [style*="background:linear-gradient(160deg,#eaf5d8"],
  [style*="background:linear-gradient(160deg,#e0f5f5"] {
    min-height: 240px !important;
  }

  /* ── Evento detalhe: sidebar desce para baixo do conteúdo ── */
  [style*="grid-template-columns:1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar sticky deixa de ser sticky em tablet */
  [style*="position:sticky"][style*="top:104px"] {
    position: static !important;
  }

  /* ── Estatísticas: scroll horizontal ou 2×2 ── */
  [style*="justify-content:space-between"][style*="align-items:center"][style*="padding:38px 100px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding: 38px 40px !important;
  }

  /* Remover borders entre estatísticas */
  [style*="border-right:1px solid rgba(125,194,65"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(125, 194, 65, 0.3) !important;
    padding-bottom: 20px !important;
  }

  /* ── Banner CTA: empilhar ── */
  [style*="padding:56px 64px"][style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 40px 36px !important;
    text-align: center !important;
  }

  /* ── Agenda: grid de 4 colunas para 96px → compactar ── */
  [style*="grid-template-columns:96px 1fr auto auto"] {
    grid-template-columns: 80px 1fr auto !important;
  }

  [style*="grid-template-columns:150px 1fr auto auto"] {
    grid-template-columns: 100px 1fr auto !important;
  }

  /* Esconder o 4º item (botão) nos grids de eventos de 4 colunas, redirecionar para o 3º */
  [style*="grid-template-columns:150px 1fr auto auto"] > a:last-child,
  [style*="grid-template-columns:96px 1fr auto auto"] > a:last-child {
    display: none !important;
  }

  [style*="grid-template-columns:150px 1fr auto auto"] > span:nth-child(3),
  [style*="grid-template-columns:96px 1fr auto auto"] > span:nth-child(3) {
    display: none !important;
  }

  /* ── Featured evento ── */
  [style*="margin:32px 100px 0"] {
    margin: 20px 40px 0 !important;
  }

  [style*="padding:48px 56px"] {
    padding: 32px 28px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — até 768px
══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Header: hamburger implícito — esconder nav, mostrar só logo + botão ── */
  header[style*="padding:0 72px"] {
    padding: 0 20px !important;
    height: 64px !important;
  }

  header nav {
    gap: 12px !important;
  }

  header nav > a:not([style*="background:#7DC241"]) {
    display: none !important;
  }

  header nav > a[style*="background:#7DC241"] {
    padding: 9px 18px !important;
    font-size: 11px !important;
  }

  /* ── Padding horizontal das secções → 20px ── */
  [style*="padding:96px 100px"],
  [style*="padding:88px 100px"],
  [style*="padding:80px 100px"],
  [style*="padding:72px 100px"],
  [style*="padding:64px 100px"],
  [style*="padding:72px 100px 88px"] {
    padding: 48px 20px !important;
  }

  [style*="padding:0 100px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Banner CTA margem */
  [style*="margin:0 100px"] {
    margin: 0 20px !important;
  }

  [style*="margin:0 100px 72px"] {
    margin: 0 20px 48px !important;
  }

  [style*="margin:32px 100px 0"] {
    margin: 16px 20px 0 !important;
  }

  /* ── Hero home ── */
  section[style*="height:740px"] {
    height: auto !important;
    min-height: 100svh !important;
    padding-bottom: 56px !important;
  }

  /* ── Hero de evento ── */
  section[style*="height:520px"],
  section[style*="height:480px"] {
    height: auto !important;
    min-height: 60svh !important;
  }

  /* Empilhar conteúdo do hero */
  [style*="justify-content:space-between"][style*="align-items:flex-end"][style*="gap:60px"],
  [style*="justify-content:space-between"][style*="align-items:flex-end"][style*="gap:40px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* Botões do hero em coluna */
  [style*="display:flex"][style*="gap:12px"] > a {
    flex: 1 !important;
    text-align: center !important;
  }

  /* ── Grids → 1 coluna ── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns:1.6fr 1fr"],
  [style*="grid-template-columns:400px 1fr"],
  [style*="grid-template-columns:1fr 400px"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:220px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards largos: altura da coluna de cor */
  [style*="min-height:380px"],
  [style*="min-height:260px"] {
    min-height: 200px !important;
  }

  /* ── Agenda: evento em linha simplificada ── */
  [style*="grid-template-columns:96px 1fr auto auto"],
  [style*="grid-template-columns:150px 1fr auto auto"],
  [style*="grid-template-columns:180px 1fr auto"] {
    grid-template-columns: 72px 1fr !important;
    gap: 16px !important;
  }

  /* Esconder badges e botões inline nos eventos de lista */
  [style*="grid-template-columns:96px 1fr auto auto"] > span,
  [style*="grid-template-columns:96px 1fr auto auto"] > a,
  [style*="grid-template-columns:150px 1fr auto auto"] > span,
  [style*="grid-template-columns:150px 1fr auto auto"] > a,
  [style*="grid-template-columns:180px 1fr auto"] > a {
    display: none !important;
  }

  /* Link "Ver detalhes" no título do evento */
  [style*="grid-template-columns:96px 1fr auto auto"] > div h4,
  [style*="grid-template-columns:150px 1fr auto auto"] > div h4 {
    cursor: pointer !important;
  }

  /* ── Barra de filtros da agenda: scroll horizontal ── */
  [style*="position:sticky"][style*="top:76px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  [style*="position:sticky"][style*="top:76px"] > div:first-child {
    flex-wrap: nowrap !important;
    min-width: max-content !important;
  }

  /* ── Barra meta-info do evento ── */
  [style*="padding:28px 100px"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
    padding: 24px 20px !important;
  }

  [style*="display:flex"][style*="gap:56px"] {
    gap: 24px !important;
    flex-wrap: wrap !important;
  }

  /* ── Estatísticas: 2×2 ── */
  [style*="justify-content:space-between"][style*="padding:38px 100px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 32px 20px !important;
    gap: 20px !important;
  }

  [style*="border-right:1px solid rgba(125,194,65"] {
    border-right: none !important;
    padding: 0 !important;
  }

  /* ── Programa do evento: grid 110px → 1 coluna ── */
  [style*="grid-template-columns:110px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── Oradores: 3 colunas → 1 ── */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Sidebar sticky → estático ── */
  [style*="position:sticky"][style*="top:104px"] {
    position: static !important;
  }

  /* ── CTA Banner empilhado ── */
  [style*="padding:56px 64px"],
  [style*="padding:48px 56px"] {
    padding: 32px 20px !important;
    flex-direction: column !important;
    gap: 20px !important;
    text-align: left !important;
  }

  /* Botões CTA a 100% em mobile */
  [style*="border-radius:999px"][style*="white-space:nowrap"]:not(span) {
    white-space: normal !important;
  }

  /* ── Newsletter da agenda: empilhar input + botão ── */
  [style*="padding:48px 56px"] > form,
  [style*="padding:48px 56px"] > div:last-child {
    flex-direction: column !important;
    width: 100% !important;
  }

  [style*="padding:48px 56px"] input[type="email"] {
    min-width: unset !important;
    width: 100% !important;
  }

  /* ── Featured evento: padding reduzido ── */
  [style*="padding:48px 56px"][style*="justify-content:space-between"] {
    padding: 28px 20px !important;
  }

  /* ── Formulário de contacto: 2 colunas → 1 coluna ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Team cards menores: imagem + conteúdo em coluna ── */
  [style*="grid-template-columns:220px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Eventos passados: 4 → 2 colunas ── */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Font sizes reduzidos para mobile ── */
  h1[style*="font-size:106px"] { font-size: 52px !important; line-height: 0.95 !important; }
  h1[style*="font-size:88px"]  { font-size: 44px !important; }
  h1[style*="font-size:80px"]  { font-size: 40px !important; }
  h1[style*="font-size:76px"]  { font-size: 38px !important; }
  h1[style*="font-size:64px"]  { font-size: 34px !important; }
  h2[style*="font-size:72px"]  { font-size: 36px !important; line-height: 1 !important; }
  h2[style*="font-size:56px"]  { font-size: 30px !important; }
  h2[style*="font-size:48px"]  { font-size: 28px !important; }
  h2[style*="font-size:34px"]  { font-size: 24px !important; }
  h3[style*="font-size:40px"]  { font-size: 26px !important; }
  h3[style*="font-size:36px"]  { font-size: 24px !important; }
  h3[style*="font-size:32px"]  { font-size: 22px !important; }
  h4[style*="font-size:26px"]  { font-size: 20px !important; }
  h4[style*="font-size:22px"]  { font-size: 18px !important; }

  /* Estatísticas */
  [style*="font-size:54px"] { font-size: 36px !important; }
  [style*="font-size:46px"] { font-size: 30px !important; }
  [style*="font-size:42px"] { font-size: 28px !important; }

  /* ── Margem da barra de agenda sticky ── */
  [style*="top:76px"] {
    top: 64px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PEQUENO — até 480px
══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  h1[style*="font-size:106px"] { font-size: 40px !important; }
  h1[style*="font-size:88px"]  { font-size: 34px !important; }
  h2[style*="font-size:72px"]  { font-size: 30px !important; }

  /* Eventos passados: 2 → 1 coluna */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Botão de contacto no header */
  header nav > a[style*="background:#7DC241"] {
    padding: 8px 14px !important;
    font-size: 10px !important;
  }
}