/* Cognitive Cards isolated layer */

.cog-table-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
justify-items:center;
}

.cog-card-wrap{
  width:100%;
  max-width:370px;
}

.cog-card{
  box-sizing:border-box;
  width:100%;
  max-width:370px;
  min-height:780px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:16px;
  border:7px solid var(--rarity-border, #f5d76e);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--intel-a,#64748b) 55%, #ffffff), transparent 34%),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--intel-b,#64748b) 52%, transparent), transparent 36%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--intel-a,#64748b) 25%, #ffffff),
      color-mix(in srgb, var(--intel-b,#64748b) 55%, var(--cat-accent,#d9dee7)) 48%,
      color-mix(in srgb, var(--intel-c,#64748b) 70%, #020617)
    );
  box-shadow:0 30px 80px rgba(2,6,23,.34);
}

.cog-card > *{
  position:relative;
  z-index:2;
}

.cog-card__top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}

.cog-card__stage{
  display:block;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:rgba(15,23,42,.68);
  margin-bottom:6px;
}

.cog-card__top h3{
  margin:0;
  font-size:20px;
  line-height:1.08;
  font-weight:950;
  color:#111827;
}

.cog-card__power{
  text-align:right;
  color:#8b1e1e;
}

.cog-card__power strong{
  display:block;
  font-size:32px;
  line-height:1;
  font-weight:950;
}

.cog-card__power span{
  display:block;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
}

.cog-card__image{
  height:240px;
  border-radius:14px;
  padding:8px;
  overflow:hidden;
  background:white;
  border:4px solid rgba(255,255,255,.75);
  box-shadow:0 16px 34px rgba(2,6,23,.28);
}

.cog-card__image img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:9px;
  background:white;
}

.cog-cover-post-image img{
  object-fit:cover;
}

.cog-card__strip,
.cog-card__text,
.cog-card__attack,
.cog-card__attributes div{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  border:1px solid rgba(15,23,42,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}

.cog-card__strip{
  margin-top:10px;
  min-height:36px;
  border-radius:9px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.cog-card__text{
  margin-top:10px;
  min-height:150px;
  max-height:150px;
  overflow:hidden;
  border-radius:11px;
  padding:13px;
}

.cog-card__text p{
  margin:0;
  font-size:13.2px;
  line-height:1.45;
  font-weight:750;
  color:rgba(15,23,42,.78);
}

.cog-card__symbols{
  margin-top:10px;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  min-height:36px;
}

.cog-symbol,
.cog-mini-badge{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 6px 14px rgba(2,6,23,.24);
}

.cog-symbol img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.cog-mini-badge{
  background:rgba(15,23,42,.82);
  color:white;
}

.cog-mini-badge .material-icons{
  font-size:17px;
}

.cog-card__attack{
  margin-top:10px;
  min-height:72px;
  border-radius:11px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr 48px;
  gap:10px;
  align-items:center;
}

.cog-card__attack strong{
  display:block;
  font-size:14px;
  font-weight:950;
}

.cog-card__attack span{
  display:block;
  margin-top:3px;
  font-size:10.8px;
  line-height:1.25;
  font-weight:700;
  color:rgba(15,23,42,.68);
}

.cog-card__attack b{
  font-size:32px;
  font-weight:950;
  text-align:right;
}

.cog-card__attributes{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.cog-card__attributes div{
  border-radius:9px;
  padding:8px 4px;
  text-align:center;
}

.cog-card__attributes span{
  display:block;
  font-size:8px;
  font-weight:950;
  color:rgba(15,23,42,.52);
}

.cog-card__attributes strong{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:950;
  color:#111827;
}

.cog-card__footer{
  margin-top:auto;
  padding-top:9px;
  border-top:1px solid rgba(15,23,42,.25);
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  font-weight:850;
  color:rgba(15,23,42,.70);
}

/* Raridade */
.cog-rarity-comum{ --rarity-border:#cbd5e1; }
.cog-rarity-incomum{ --rarity-border:#86efac; }
.cog-rarity-rara{ --rarity-border:#93c5fd; }
.cog-rarity-lendaria{ --rarity-border:#facc15; }

.cog-rarity-lendaria{
  box-shadow:
    0 34px 95px rgba(2,6,23,.42),
    0 0 42px rgba(250,204,21,.42);
}
@media(max-width:900px){
.cog-table-grid{
grid-template-columns:1fr;
}
}

.card-title{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.card-summary{
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}

.cog-wormhole{
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  text-decoration:none;
}

.cog-wormhole:hover{
  transform:translateY(-2px) scale(1.08);
  filter:brightness(1.08);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.55),
    0 10px 24px rgba(2,6,23,.28);
}

.cog-card__image{
  aspect-ratio:16 / 9;
  height:auto;
}

.cog-cover-post-image img{
  object-fit:cover;
}

.cog-cover-ods-image img{
  object-fit:contain;
  padding:12px;
}

.cog-card::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:17px;
  border:2px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 0 0 1px rgba(15,23,42,.18),
    inset 0 0 34px rgba(255,255,255,.18);
  pointer-events:none;
  z-index:1;
}

.cog-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(255,255,255,.36) 48%,
      transparent 61%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.05) 0 2px,
      transparent 2px 8px
    );
  transform:rotate(12deg);
  mix-blend-mode:soft-light;
  opacity:.62;
  pointer-events:none;
  z-index:1;
}

.cog-card:hover::after{
  animation:cogShine 1.4s ease forwards;
}

@keyframes cogShine{
  from{
    transform:translateX(-18%) rotate(12deg);
    opacity:.35;
  }
  to{
    transform:translateX(18%) rotate(12deg);
    opacity:.75;
  }
}

.card-cat-artigo::after{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 10px),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.34) 48%, transparent 61%);
}

.card-cat-rea::after{
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.32), transparent 12%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.34) 48%, transparent 61%);
}

.card-cat-pesquisa::after{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,.30) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.30) 48%, transparent 61%);
}

.card-cat-metodologia::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 61%);
  background-size:24px 24px, 24px 24px, auto;
}

.card-cat-diagnostico::after{
  background:
    repeating-radial-gradient(circle at 40% 45%, rgba(255,255,255,.09) 0 2px, transparent 2px 12px),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 61%);
}

.cog-card__top h3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.cog-card__image{
  aspect-ratio:16 / 9;
  height:auto;
}

.cog-card__rarity{
display:inline-block;
margin-bottom:6px;

font-size:11px;
font-weight:900;
letter-spacing:.08em;

padding:4px 8px;
border-radius:999px;

background:rgba(15,23,42,.82);
color:white;
border:1px solid rgba(255,255,255,.45);
}

.cog-rarity-comum{
background:#e5e7eb;
color:#334155;
}

.cog-rarity-incomum{
background:#d1fae5;
color:#065f46;
}

.cog-rarity-rara{
background:#dbeafe;
color:#1e40af;
}

.cog-rarity-lendaria{
background:#fef3c7;
color:#92400e;
}

.cog-attr{
  cursor:help;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.cog-attr:hover{
transform:translateY(-2px) scale(1.05);
background:white;
box-shadow:
0 0 0 2px rgba(255,255,255,.7),
0 12px 26px rgba(2,6,23,.28);
}

.cog-card__power{
text-align:right;
color:#8b1e1e;
min-width:70px;
}

.cog-card__power strong{
font-size:30px;
}

.cog-card__top h3{
margin-top:4px;
}

.cog-rarity-lendaria{
--rarity-border:#facc15;

box-shadow:
0 34px 95px rgba(2,6,23,.42),
0 0 0 4px rgba(250,204,21,.15),
0 0 42px rgba(250,204,21,.42);
}

.cog-card{
  background:
    radial-gradient(circle at 15% 0%,
      color-mix(in srgb, var(--intel-a,#64748b) 62%, #ffffff),
      transparent 34%
    ),
    radial-gradient(circle at 88% 12%,
      color-mix(in srgb, var(--intel-b,#64748b) 58%, transparent),
      transparent 38%
    ),
    radial-gradient(circle at 50% 105%,
      color-mix(in srgb, var(--intel-c,#64748b) 65%, #020617),
      transparent 45%
    ),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--intel-a,#64748b) 35%, #ffffff),
      color-mix(in srgb, var(--intel-b,#64748b) 62%, #ffffff) 48%,
      color-mix(in srgb, var(--intel-c,#64748b) 72%, #020617)
    );
}

.cog-card__strip{
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--cat-accent,#facc15) 42%, #ffffff),
      rgba(255,255,255,.72)
    );
  border-left:5px solid var(--cat-accent,#facc15);
  color:#111827;
}

.card-cat-rea{ --cat-accent:#facc15; }
.card-cat-artigo{ --cat-accent:#93c5fd; }
.card-cat-pesquisa{ --cat-accent:#c084fc; }
.card-cat-metodologia{ --cat-accent:#fb923c; }
.card-cat-projeto-pratico{ --cat-accent:#86efac; }
.card-cat-banco-ideias{ --cat-accent:#d8b4fe; }
.card-cat-diagnostico{ --cat-accent:#fca5a5; }
.card-cat-planejamento{ --cat-accent:#a5b4fc; }
.card-cat-exploracao{ --cat-accent:#fde68a; }
.card-cat-sem-categoria{ --cat-accent:#cbd5e1; }

.cog-card{
  border:7px solid var(--rarity-border,#facc15);
}

.cog-card::before{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:17px;
  border:2px solid color-mix(in srgb, var(--intel-a,#64748b) 60%, #ffffff);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 38px color-mix(in srgb, var(--intel-b,#64748b) 30%, transparent);
  pointer-events:none;
}

.cog-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(255,255,255,.35) 48%,
      transparent 61%
    ),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 18%);
  transform:rotate(12deg);
  mix-blend-mode:soft-light;
  opacity:.55;
  pointer-events:none;
}

.cog-card:hover::after{
  animation:cogShine 1.4s ease forwards;
}

.cog-card__rarity{
  position:static;
  display:inline-block;
  margin-bottom:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
  background:rgba(15,23,42,.78);
  color:white;
}

.cog-card__top{
  display:grid;
  grid-template-columns:1fr 72px;
  gap:12px;
}

.cog-card__power{
  text-align:right;
  min-width:72px;
}