/* Layout SEO "B": intro 2 col + mockup smartphone + blocchi bento asimmetrici.
   Usato dalle landing (seo_layout = bento) e da /landing-seo-compare. Tutto sotto .seo-bento. */

.seo-bento {
  --sb-blue: #0066cc;
  --sb-lilla: #e3e8ff;
  /* Hero landing = rgb(0 29 255 / 11%) su #f4f4f4 (index.css .hero) → equivalente opaco, così il telefono non traspare */
  --sb-hero: #d9dcf5;
  --sb-bg: #f4f7fb;
  --sb-ink: #111827;
  --sb-text: #3a4556;
  --sb-glass: rgba(255, 255, 255, 0.62);
  --sb-glass-border: rgba(255, 255, 255, 0.9);
  --sb-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 72px;
  text-align: left;
  color: var(--sb-text);
}

.seo-bento *,
.seo-bento *::before,
.seo-bento *::after { box-sizing: border-box; }

.seo-bento h2,
.seo-bento h3,
.seo-bento p { text-align: left; }

.seo-bento a {
  color: var(--sb-blue);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seo-bento strong { color: var(--sb-ink); }

/* ---------- Intro 2 col ---------- */
.seo-bento__intro {
  display: grid;
  /* Mockup a sinistra, testo a destra */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 28px;
}

.seo-bento .seo-bento__title {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--sb-ink);
  margin: 0 0 14px;
}

.seo-bento__text p {
  font-size: 1.06rem;
  line-height: 1.65;
  margin: 0;
  color: var(--sb-text);
}

/* ---------- Mockup smartphone (proporzioni ~9:19) ---------- */
.seo-bento__visual {
  position: relative;
  z-index: 1;
  min-height: 470px;
  /* Overlap soft (desktop): il telefono scende sotto la griglia bento (che sta sopra, z-index 2). */
  margin-top: 36px;
  margin-bottom: -160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seo-bento__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.55;
  pointer-events: none;
}

.seo-bento__blob--lime { width: 190px; height: 190px; background: #dcff90; left: 8%; top: 6%; }
.seo-bento__blob--fuchsia { width: 170px; height: 170px; background: #eb7dff; right: 6%; bottom: 8%; opacity: 0.35; }
.seo-bento__blob--yellow { width: 150px; height: 150px; background: #ffcb64; right: 20%; top: 0; opacity: 0.45; }

.seo-bento__phone {
  position: relative;
  width: 224px;
  aspect-ratio: 9 / 19;
  border: 8px solid #1f2937;
  border-radius: 38px;
  background: var(--sb-bg);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.seo-bento__phone::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 60px;
  height: 7px;
  margin-left: -30px;
  border-radius: 7px;
  background: #1f2937;
  z-index: 2;
}

.seo-bento__phone::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 70px;
  height: 4px;
  margin-left: -35px;
  border-radius: 4px;
  background: rgba(31, 41, 55, 0.35);
}

.seo-bento__screen {
  height: 100%;
  padding: 30px 10px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* Top bar come home reale / mini-home email: coccarda · logo · cuore notifiche */
.seo-bento__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: 0 0 auto;
}

.seo-bento__rosette {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.53) 0 18%, transparent 19%),
    conic-gradient(from 90deg, #93c5fd, #1d4ed8, #93c5fd, #1e3a8a, #93c5fd);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.seo-bento__rosette-in {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid rgba(29, 78, 216, 0.25);
}

.seo-bento__logo {
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0066cc;
}
.seo-bento__logo span { color: #ffcc00; text-shadow: 0 0 9px #0d00ffbf; }

.seo-bento__heart { flex: 0 0 15px; color: var(--sb-ink); }

/* Meeday: solo cerchi avatar, senza etichette (solo landing non-aziende) */
.seo-bento__stories {
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
}
.seo-bento__story {
  display: block;
  width: 31px;
  text-align: center;
}
.seo-bento__story i {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  background: var(--sb-bg);
}
.seo-bento__story:first-child i { border-color: #0066cc; }

.seo-bento__cards {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Card in alto: la parte bassa dello schermo finisce sotto la griglia (overlap) */
  justify-content: flex-start;
  gap: 8px;
  padding-top: 4px;
}

.seo-bento__mini {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  /* Dimensione iniziale delle card */
  padding: 9px 11px;
  width: 88%;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.28;
  color: var(--sb-ink);
}

.seo-bento__mini small {
  display: block;
  color: var(--sb-blue);
  font-weight: 900;
  font-size: 0.7rem;
  margin-bottom: 3px;
}

.seo-bento__mini--2 { margin-left: 14px; margin-right: -4px; }
.seo-bento__mini--3 { margin-right: 14px; background: var(--sb-hero); }

/* ---------- Bento: griglia asimmetrica 6 colonne (pattern ogni 3 blocchi) ---------- */
.seo-bento__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.seo-bento__tile {
  grid-column: span 3;
  border-radius: 20px;
  padding: 24px 26px;
  border: 1px solid var(--sb-glass-border);
  box-shadow: var(--sb-shadow);
  background: var(--sb-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.seo-bento__tile h3 {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--sb-ink);
  margin: 0 0 8px;
}

.seo-bento__tile p {
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0;
  color: var(--sb-text);
}

/* Gruppo da 3: largo lilla (4) + piccolo glass (2) + largo lilla orizzontale (6) */
.seo-bento__tile:nth-child(6n + 1) { grid-column: span 4; background: var(--sb-hero); -webkit-backdrop-filter: none; backdrop-filter: none; }
.seo-bento__tile:nth-child(6n + 1) h3 { font-size: 1.4rem; }
.seo-bento__tile:nth-child(6n + 2) { grid-column: span 2; }
.seo-bento__tile:nth-child(6n + 3) {
  grid-column: span 6;
  background: var(--sb-hero);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px 28px;
  align-items: center;
}
.seo-bento__tile:nth-child(6n + 3) h3 { margin: 0; }

/* Secondo gruppo da 3 (blocchi 4–6): specchiato (piccolo + largo) e chiusura glass orizzontale */
.seo-bento__tile:nth-child(6n + 4) { grid-column: span 2; }
.seo-bento__tile:nth-child(6n + 5) { grid-column: span 4; background: var(--sb-hero); -webkit-backdrop-filter: none; backdrop-filter: none; }
.seo-bento__tile:nth-child(6n) {
  grid-column: span 6;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px 28px;
  align-items: center;
}
.seo-bento__tile:nth-child(6n) h3 { margin: 0; }

/* Blocchi in coda (resto 1 o 2): chiudi la riga */
.seo-bento__tile:last-child:nth-child(3n + 1) { grid-column: span 6; }

@media (max-width: 900px) {
  /* Mobile: mockup sopra il testo (ordine DOM), poi testo SEO */
  .seo-bento__intro { grid-template-columns: 1fr; gap: 20px; }
  /* Mobile: mockup nascosto, testo intro a larghezza piena */
  .seo-bento__visual { display: none; }

  .seo-bento__grid { grid-template-columns: 1fr; }
  .seo-bento__tile,
  .seo-bento__tile:nth-child(n),
  .seo-bento__tile:last-child:nth-child(n) { grid-column: 1 / -1; display: block; }
  .seo-bento__tile:nth-child(6n + 3) h3,
  .seo-bento__tile:nth-child(6n) h3 { margin: 0 0 8px; }
}

@media (max-width: 600px) {
  .seo-bento { padding: 16px 12px 44px; }
  .seo-bento__tile { padding: 18px 18px; }
}