/* ===================== */
/* Index Page Styling    */
/* ===================== */

/* Page header */
.page-header {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   color: var(--primary);
   margin-bottom: 1.5rem;
   text-align: center;
}

/* Grid layout khusus court */
.court-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* default 3 kolom */
   gap: 1.5rem;
}

/* Court card */
.court-card {
   background: var(--bg-main);
   border-radius: 16px;
   box-shadow: var(--shadow-md);
   padding: 1rem;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
   align-items: flex-start; /* ⬅️ konten rata kiri */
   text-align: left; /* ⬅️ teks rata kiri */
}

.court-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
}

/* Thumbnail image */
.court-card img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   border-radius: 12px;
   margin-bottom: 1rem;
   box-shadow: var(--shadow-sm);
   align-self: center; /* gambar tetap center horizontal */
}

/* Title */
.court-card h3 {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 0.5rem;
}

/* Price */
.court-card em {
   display: block;
   font-size: 1rem;
   color: var(--accent);
   font-weight: 500;
   margin-bottom: 0.75rem;
}

.court-card h6 {
   color: var(--secondary);
   margin-bottom: 1rem;
}

.court-card em span,
.court-card span {
   font-size: 0.9rem;
   font-weight: 400;
   color: var(--text-light);
}

/* Time info */
.court-card h5 {
   font-size: 0.9rem;
   font-weight: 400;
   color: var(--text-light);
   margin-bottom: 1rem;
}

.court-card h5 i {
   color: var(--primary);
   margin-right: 4px;
}

/* Link button */
.court-card a {
   display: inline-block;
   background: var(--secondary);
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
   align-self: flex-start;
}

.court-card a:hover {
   background: var(--accent);
   transform: translateY(-2px);
   box-shadow: var(--shadow-sm);
}

/* Responsive grid */
@media (max-width: 992px) {
   .court-grid {
      grid-template-columns: repeat(2, 1fr); /* tablet: 2 kolom */
   }
   .page-header {
      margin: 0;
      margin-bottom: 24px;
   }
}

@media (max-width: 764px) {
   .court-grid {
      grid-template-columns: 1fr;
   }

   .page-header {
      margin: 0;
      margin-bottom: 8px;
   }
}

.rating {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   margin-bottom: 0.75rem;
   font-size: 0.95rem;
   color: var(--secondary);
   margin-left: 0;
   justify-content: flex-start;
}

.rating.text-muted {
   font-weight: normal;
   margin: 0;
}

.rating i {
   color: gold;
   font-size: 1rem;
}

.rating span {
   font-size: 0.9rem;
   color: var(--text-dark);
   font-weight: 500;
}