/* ============================================================
   PORTAL DO MEMBRO
   Estilos específicos de views/portal-membro.html.
   Reaproveita os tokens de cor e tipografia definidos em style.css.
   ============================================================ */

.breadcrumb{
  display:inline-block;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:26px;
  transition:color .2s ease;
}
.breadcrumb:hover{color:var(--magenta);}

.portal-hero{
  padding:80px 0 70px;
}
.portal-hero h1{
  font-size:clamp(32px, 4.4vw, 50px);
  margin-bottom:16px;
}
.portal-lede{
  max-width:560px;
  font-size:16.5px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.section-head p{max-width:380px; font-size:14.5px;}
.section-head code{
  font-family:var(--mono);
  background:rgba(147,49,110,0.08);
  padding:2px 6px;
  border-radius:4px;
  font-size:13px;
}

/* ---------- Agenda ---------- */
.agenda{padding:90px 0; background:var(--cream-2);}

.agenda-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.agenda-item{
  display:grid;
  grid-template-columns:56px 84px 1fr auto;
  grid-template-areas:"logo date info tag";
  align-items:center;
  gap:20px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 26px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.agenda-item:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px -20px rgba(43,15,48,0.28);
  border-color:rgba(147,49,110,0.3);
}
.agenda-logo{
  grid-area:logo;
  width:56px;
  height:56px;
  border:1.5px dashed var(--line);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  overflow:hidden;
}
.agenda-logo svg{width:20px;height:20px; opacity:.5;}
.agenda-logo img{width:100%; height:100%; object-fit:cover;}
.agenda-date{
  grid-area:date;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--deep);
  color:var(--cream);
  border-radius:12px;
  padding:12px 0;
}
.agenda-date .day{
  font-family:var(--display);
  font-size:22px;
  font-weight:600;
  line-height:1;
}
.agenda-date .month{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blush-soft);
  margin-top:4px;
}
.agenda-info{grid-area:info;}
.agenda-info h3{font-size:17px; margin:6px 0 6px;}
.agenda-info p{font-size:13.5px;}
.agenda-tag{
  grid-area:tag;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--magenta);
  border:1px dashed var(--magenta);
  padding:6px 12px;
  border-radius:100px;
  white-space:nowrap;
}

/* ---------- Materiais ---------- */
.materials{padding:90px 0;}
.materials-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.materials-grid-docs{
  grid-template-columns:repeat(2, 1fr);
  max-width:640px;
}
.material-slot{
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--paper);
  transition:border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.material-slot{cursor:pointer;}
.material-slot:hover{
  border-color:var(--magenta);
  background:rgba(147,49,110,0.04);
  transform:translateY(-3px);
  box-shadow:0 18px 34px -20px rgba(43,15,48,0.28);
}
.material-format{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.06em;
  color:var(--magenta);
  margin-bottom:6px;
}
.material-slot h3{font-size:16px;}
.material-slot p{font-size:13px; margin-bottom:14px;}
.material-open{
  margin-top:auto;
  align-self:flex-start;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--deep);
  border:1px solid var(--deep);
  padding:5px 12px;
  border-radius:100px;
  transition:background .2s ease, color .2s ease;
}
.material-slot:hover .material-open{
  background:var(--deep);
  color:var(--cream);
}

/* ---------- Ficha de inscrição (Google Forms incorporado) ---------- */
.enrollment{padding:100px 0;}

.form-embed-wrap{
  max-width:760px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:0 30px 60px -32px rgba(43,15,48,0.3);
}
.form-embed-wrap iframe{
  width:100%;
  height:2000px;
  border:none;
  display:block;
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px){
  .materials-grid{grid-template-columns:repeat(2,1fr);}
  .agenda-item{
    grid-template-columns:48px 60px 1fr;
    gap:14px;
    grid-template-areas:
      "logo date info"
      "tag  tag  tag";
  }
  .agenda-logo{width:48px; height:48px;}
  .agenda-tag{justify-self:flex-start; margin-top:14px;}
}

@media (max-width: 560px){
  .materials-grid-docs{grid-template-columns:1fr;}
  .form-embed-wrap iframe{height:2400px;}
}