/* Lightweight layout helpers for the home variations grid.
   Keeps to Bootstrap philosophy while enabling a concentric layout. */
.home-variations-grid {
  position: relative;
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.2rem;
}
.hv-item-small .hv-thumb { box-shadow: var(--bs-box-shadow-sm); }
.hv-featured-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  grid-column: 1 / -1;
  place-items: center;
  margin-block: 1rem 2rem;
}
.hv-item-featured .hv-thumb { box-shadow: var(--bs-box-shadow); }
.hv-thumb .hv-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity .25s ease; }
.hv-thumb:hover .hv-overlay, .hv-thumb:focus-within .hv-overlay { opacity: 1; }
.hv-title { color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
@media (max-width: 768px) {
  .hv-featured-group { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* Orbital layout (new) */
.home-variations-orbit {
  position: relative;
  width: min(1400px, 95%);
  margin-inline: auto;
  display: grid;
  /* 14 columns to allow spacing around a central 2x2 block */
  grid-template-columns: repeat(14, 1fr);
  grid-auto-rows: 90px;
  gap: .75rem;
  padding: .5rem;
}
.orbit-item { position: relative; }
.orbit-item a { text-decoration: none; }
.orbit-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .25s ease; }
.orbit-item:hover .orbit-overlay, .orbit-item:focus-within .orbit-overlay { opacity: 1; }
.orbit-title { color: #fff; font-weight: 600; font-size: .85rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* Featured 2x2 square centered roughly in the middle columns 6-9 */
.orbit-featured { grid-row: 6 / span 4; grid-column: 6 / span 4; }
.orbit-f1 { grid-row: 5 / span 4; grid-column: 6 / span 4; }
.orbit-f2 { grid-row: 5 / span 4; grid-column: 10 / span 4; }
.orbit-f3 { grid-row: 9 / span 4; grid-column: 6 / span 4; }
.orbit-f4 { grid-row: 9 / span 4; grid-column: 10 / span 4; }
.orbit-featured a { transform: scale(0.9); transform-origin: center; }
.orbit-featured a:hover, .orbit-featured a:focus { transform: scale(0.92); }
.orbit-featured { height: 100%; }
.orbit-featured a { display: block; }
.orbit-featured .orbit-overlay { font-size: 1rem; }

/* Surrounding small items (approximate ring) */
.orbit-small { grid-row: span 2; grid-column: span 2; z-index: 2; }
.orbit-featured { z-index: 1; }
/* Position classes (tweak as desired) */
.orbit-s1 { grid-row: 3 / span 2; grid-column: 6 / span 2; }
.orbit-s2 { grid-row: 3 / span 2; grid-column: 8 / span 2; }
.orbit-s3 { grid-row: 3 / span 2; grid-column: 10 / span 2; }
.orbit-s4 { grid-row: 5 / span 2; grid-column: 4 / span 2; }
.orbit-s5 { grid-row: 5 / span 2; grid-column: 12 / span 2; }
.orbit-s6 { grid-row: 7 / span 2; grid-column: 4 / span 2; }
.orbit-s7 { grid-row: 7 / span 2; grid-column: 12 / span 2; }
.orbit-s8 { grid-row: 9 / span 2; grid-column: 4 / span 2; }
.orbit-s9 { grid-row: 9 / span 2; grid-column: 12 / span 2; }
.orbit-s10 { grid-row: 11 / span 2; grid-column: 4 / span 2; }
.orbit-s11 { grid-row: 11 / span 2; grid-column: 6 / span 2; }
.orbit-s12 { grid-row: 11 / span 2; grid-column: 8 / span 2; }
.orbit-s13 { grid-row: 11 / span 2; grid-column: 10 / span 2; }
.orbit-s14 { grid-row: 11 / span 2; grid-column: 12 / span 2; }

/* Responsive adjustments */
@media (max-width: 1100px) {
  .home-variations-orbit { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 100px; }
  .orbit-featured, .orbit-f1, .orbit-f2, .orbit-f3, .orbit-f4 { grid-column: span 4; }
  .orbit-f1 { grid-row: 3 / span 4; }
  .orbit-f2 { grid-row: 3 / span 4; }
  .orbit-f3 { grid-row: 7 / span 4; }
  .orbit-f4 { grid-row: 7 / span 4; }
  .orbit-small { grid-column: span 2; }
}
@media (max-width: 768px) {
  .home-variations-orbit { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; }
  .orbit-featured, .orbit-f1, .orbit-f2, .orbit-f3, .orbit-f4 { grid-column: span 2; grid-row: auto; }
  .orbit-small { grid-column: span 2; grid-row: auto; }
}