/* ============================================================
   Squad Team Section — supplemental patch
   -----------------------------------------------------------
   Link this file AFTER your existing main.css. Do NOT edit or
   replace main.css — this only adds the handful of classes the
   Squad section uses that weren't in your original build.
   Example:
     <link rel="stylesheet" href="../assets/main.css">
     <link rel="stylesheet" href="../assets/squad-patch.css">
   ============================================================ */

/* --- Badge (the divider lines either side of "SQUAD") --- */
.before\:mr-2\.5::before { content: ""; margin-right: .625rem; }
.before\:block::before { content: ""; display: block; }
.before\:h-px::before { content: ""; height: 1px; }
.before\:w-11\.5::before { content: ""; width: 2.875rem; }
.before\:opacity-50::before { content: ""; opacity: .5; }
.before\:bg-\[linear-gradient\(90deg\,rgba\(0\,0\,0\,0\)_0\%\,\#000_100\%\)\]::before {
  content: "";
  background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 100%);
}
.after\:ml-2\.5::after { content: ""; margin-left: .625rem; }
.after\:block::after { content: ""; display: block; }
.after\:h-px::after { content: ""; height: 1px; }
.after\:w-11\.5::after { content: ""; width: 2.875rem; }
.after\:opacity-50::after { content: ""; opacity: .5; }
.after\:bg-\[linear-gradient\(90deg\,\#000_0\%\,rgba\(0\,0\,0\,0\)_100\%\)\]::after {
  content: "";
  background-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 100%);
}
.size-4\.25 { width: 1.0625rem; height: 1.0625rem; }
.max-w-\[600px\] { max-width: 600px; }

/* --- "View All Members" button --- */
.pr-\[6px\] { padding-right: 6px; }
.w-13\.5 { width: 3.375rem; }
.shadow-\[0_8px_12px_0_rgba\(0\,0\,0\,0\.16\)\] {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, .16);
}
.ease-bouncy { transition-timing-function: cubic-bezier(.34, 1.42, .64, 1); }
.duration-400 { transition-duration: .4s; }
.active\:scale-\[0\.98\]:active { scale: .98; }
@media (hover: hover) {
  .group:hover .group-hover\:rotate-45 { rotate: 45deg; }
}
.w-\[80\%\] { width: 80%; }
@media (min-width: 48rem) {
  .md\:w-auto { width: auto; }
}

/* --- Desktop card container (scattered/stacked layout) --- */
[data-squad-cards] {
  position: relative;
  overflow: hidden;
  height: 850px;
}
@media (min-width: 80rem) {
  [data-squad-cards] { height: 670px; }
}

/* --- Force the mobile/desktop toggle, no matter what else matches ---
   [data-squad-cards] is the scattered desktop layout.
   [data-squad-cards] + div is its very next sibling: the mobile grid
   wrapper (<div class="block lg:hidden">). Using !important here
   guarantees exactly one of the two is ever visible, removing any
   chance of a specificity tie with existing .hidden/.lg:block rules
   causing both to show (or both to hide) at once. */
[data-squad-cards] { display: none !important; }
[data-squad-cards] + div { display: block !important; }
@media (min-width: 64rem) {
  [data-squad-cards] { display: block !important; }
  [data-squad-cards] + div { display: none !important; }
}

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }

/* Card position offsets */
.left-\[3\%\] { left: 3%; }
.top-\[84px\] { top: 84px; }
.left-\[20\%\] { left: 20%; }
.top-\[50\%\] { top: 50%; }
.left-\[35\%\] { left: 35%; }
.top-\[0\%\] { top: 0%; }
.left-\[47\%\] { left: 47%; }
.bottom-\[0\%\] { bottom: 0%; }
.right-\[3\%\] { right: 3%; }
.top-\[40\%\] { top: 40%; }
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x, 0) var(--tw-translate-y);
}
@media (min-width: 80rem) {
  .xl\:left-0 { left: 0; }
  .xl\:left-\[22\%\] { left: 25%; }
  .xl\:top-\[31\%\] { top: 31%; }
  .xl\:left-\[43\%\] { left: 43%; }
  .xl\:left-\[56\%\] { left: 52%; }
  .xl\:right-0 { right: 0; }
  .xl\:top-\[50\%\] { top: 50%; }
}

/* --- The card itself (desktop fixed size + mobile capped size) --- */
.w-\[330px\] { width: 300px; }
.h-\[414px\] { height: 434px; }
.max-w-\[330px\] { max-width: 330px; }

/* Card photo */
.w-\[315px\] { width: 290px; }
.h-\[306px\] { height: 424px; }
.aspect-\[315\/306\] { aspect-ratio: 315 / 306; }

/* X/social icon color */
.stroke-\[\#13193A\] { stroke: #13193A; }

/* --- Mobile grid --- */
.gap-y-6 { row-gap: 1.5rem; }
.justify-items-center { justify-items: center; }
@media (min-width: 48rem) {
  .md\:gap-6 { gap: 1.5rem; }
  .md\:col-span-6 { grid-column: span 6 / span 6; }
  .md\:col-start-4 { grid-column-start: 4; }
}