@charset "UTF-8";
.clubhouse-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem; }
@container (inline-size < 640px) {
  .clubhouse-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem; } }
  .clubhouse-wrapper .hours {
    font-size: 1.25rem; }
    .clubhouse-wrapper .hours h3 {
      font-size: 1.5rem;
      margin-bottom: 1rem; }
    .clubhouse-wrapper .hours b {
      font-weight: 500;
      background-color: #ff6c0e;
      color: white;
      padding: 5px; }
@container (inline-size < 640px) {
  .clubhouse-wrapper .hours b {
    padding: 2px 6px; } }
    .clubhouse-wrapper .hours p {
      font-size: inherit; }

sl-carousel {
  position: sticky;
  top: 100px; }
@container (inline-size < 640px) {
  sl-carousel {
    position: static;
    --aspect-ratio: 3/2; }
    sl-carousel::part(navigation) {
      display: none; } }
  sl-carousel::part(pagination-item pagination-item--active) {
    background-color: #ff6c0e;
    border-color: #ff6c0e; }

h3 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem; }
  h3 strong {
    font-size: 1.8rem;
    font-weight: 600; }

.sponsor {
  text-align: center;
  margin-bottom: 2rem; }

/* === Base reset & container === */
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  /* enables sideways scroll on small screens */
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background: var(--bg); }

/* === Table styling === */
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  /* prevents columns from squishing too much */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text); }

thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: .02em;
  background: #f8fafc;
  color: #0f172a;
  position: sticky;
  /* header sticks when scrolling horizontally */
  top: 0;
  z-index: 1; }

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top; }

tbody tr:nth-child(even) {
  background: var(--row-alt); }

tbody tr:hover {
  background: #f3f4f6; }

td a[href^="mailto:"] {
  color: var(--accent);
  text-decoration: none; }

td a[href^="mailto:"]:hover {
  text-decoration: underline; }

/* === Compact padding on medium screens === */
@media (max-width: 900px) {
  th,
  td {
    padding: 10px 12px; }

  table {
    min-width: 640px; } }
/* === OPTIONAL: true "card view" under 640px ===
   To enable, add data-label="Column name" to each <td>.
   Example: <td data-label="Team">2016 Girls</td>
*/
@media (max-width: 640px) {
  /* Hide the traditional header (we’ll print labels via ::before) */
  thead {
    display: none; }

  table {
    min-width: 0; }

  /* allow full stack */
  tbody,
  tr,
  td {
    display: block;
    width: 100%; }

  tbody tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    background: var(--bg); }

  tbody tr + tr {
    margin-top: 16px; }

  tbody tr:nth-child(even) {
    background: var(--bg); }

  /* disable zebra inside cards */
  td {
    border-bottom: 1px solid var(--border);
    /* left space for label */
    position: relative; }
    td a {
      font-size: inherit; }

  td:last-child {
    border-bottom: 0; }

  td::before {
    content: attr(data-label);
    /* prints the column name */
    width: 100px;
    /* just spacing anchor */
    font-size: 0.85rem;
    font-weight: 600;
    color: black;
    text-transform: none;
    letter-spacing: .01em;
    white-space: nowrap;
    margin-right: 10px;
    display: inline-block; } }

/*# sourceMappingURL=our-club.css.map */