/* Solid, square division panels share the site's red and black palette. */
#home-divisions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:24px; align-items:stretch; }
#home-divisions-grid .division-showcase-card {
 display:flex; flex-direction:column; position:relative; overflow:hidden;
 padding:0 !important; border:1px solid #343434 !important; border-radius:0 !important;
 background:#111111 !important; background-image:none !important; box-shadow:none !important;
 transform:none !important; color:#ffffff; text-decoration:none;
 transition:border-color .2s ease;
}
#home-divisions-grid .division-showcase-card::before { display:none; }
#home-divisions-grid .division-media-frame { width:100%; height:auto; aspect-ratio:16/10; margin:0; border:0; border-bottom:1px solid #343434; border-radius:0; background:#080808; }
#home-divisions-grid .division-media-frame img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:transform .35s ease,filter .35s ease; }
#home-divisions-grid .division-card-status { position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:8px; padding:8px 11px; background:#111111; border:1px solid #555555; color:white; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
#home-divisions-grid .division-card-status::before { content:''; width:6px; height:6px; background:#e51b2b; }
#home-divisions-grid .division-card-content { display:flex; flex-direction:column; flex:1; padding:24px; }
#home-divisions-grid .division-card-league { margin:0 0 12px; color:#ff5965; font-size:10px; line-height:1.6; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
#home-divisions-grid h3 { margin:0 0 16px; font-family:'Metaor Aftershift',sans-serif; font-size:clamp(24px,2.5vw,32px); line-height:1.15; text-transform:uppercase; color:#ffffff; }
#home-divisions-grid .division-card-description { margin:0; font-size:14px; line-height:1.7; color:#b9b9bf; }
#home-divisions-grid .division-card-action { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 24px; padding:18px 0; border-top:1px solid #343434; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
#home-divisions-grid .division-card-arrow { display:grid; place-items:center; width:34px; height:34px; background:#d01722; color:#ffffff; font-size:22px; transition:background-color .2s ease,color .2s ease; }
@media(hover:hover) {
 #home-divisions-grid .division-showcase-card:hover { border-color:#d01722 !important; transform:none !important; box-shadow:none !important; }
 #home-divisions-grid .division-showcase-card:hover img { transform:scale(1.035); filter:grayscale(0); }
 #home-divisions-grid .division-showcase-card:hover .division-card-arrow { background:#ffffff; color:#d01722; }
}
#home-divisions-grid .division-showcase-card:focus-visible { outline:2px solid #ff5965; outline-offset:4px; }
#home-divisions-grid .division-showcase-card:active { border-color:#d01722 !important; }
@media(max-width:480px) { #home-divisions-grid { gap:20px; } #home-divisions-grid .division-card-content { padding:20px; } #home-divisions-grid .division-card-action { margin:0 20px; } }
@media(prefers-reduced-motion:reduce) { #home-divisions-grid .division-showcase-card, #home-divisions-grid .division-showcase-card * { transition:none !important; transform:none !important; } }

#home-divisions-grid .division-showcase-card:focus-visible img,
#home-divisions-grid .division-showcase-card:active img { filter:grayscale(0); }

/* Tablet Portrait & Landscape (iPad Mini, iPad Air, iPad Pro) */
@media (min-width: 640px) and (max-width: 1023px) {
  #home-divisions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  #home-divisions-grid .division-showcase-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    width: 100%;
    justify-self: center;
  }
}

/* On touch devices (iPhone / iPad), show full-color division artwork without requiring hover */
@media (hover: none) and (pointer: coarse) {
  #home-divisions-grid .division-media-frame img {
    filter: grayscale(0.25);
  }
}