/* Layout */
.opinion-mega { position: relative; }
.opinion-row  { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:2rem; margin:0; padding:2rem 3rem; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.opinion-col { list-style:none; }
.opinion-col h4 { margin:.25rem 0 .5rem; font-weight:600; }
.opinion-links { margin:0; padding:0; list-style:none; }
.opinion-links li { margin:.25rem 0; }
.mini-thumb { width:24px; height:24px; margin-right:.5rem; vertical-align:middle; }

/* Example dropdown behaviour if placed inside nav */
.menu-item-opinion { position:relative; }
.menu-item-opinion > .opinion-mega { display:none; position:absolute; left:0; top:100%; width:100vw; }
@media (hover:hover) {
  .menu-item-opinion:hover > .opinion-mega { display:block; }
}

/* Core positioning */
.menu-opinion { position: relative; }
.menu-opinion > .opinion-mega {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100vw;                   /* full-width strip */
  background: #fff;
  padding: 2rem 3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  display: none;                  /* <- default state */
  z-index: 999;                   /* sit above content */
}

/* Desktop: show on hover */
@media (hover:hover) {
  .menu-opinion:hover > .opinion-mega,
  .menu-opinion:focus-within > .opinion-mega {
    display: block;
  }
}

/* Grid columns inside the mega-menu */
.opinion-row  {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opinion-col h4 { margin: 0 0 .5rem; font-weight: 600; font-size: .875rem; color: #777; }
.opinion-links   { margin: 0; padding: 0; list-style: none; }
.opinion-links li{ margin: .25rem 0; }
.mini-thumb      { width: 24px; height: 24px; margin-right:.5rem; vertical-align: middle; }