/* ==========================================================================
   GREENWOOD GOLF CLUB — Course Page Styles  (courese.html)
   ========================================================================== */


/* --------------------------------------------------------------------------
   COURSE TABS
   -------------------------------------------------------------------------- */

.tabs-wrap {
  background  : rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(184, 149, 58, 0.12);
}

.tabs {
  max-width: 1100px;
  margin   : 0 auto;
  display  : flex;
  padding  : 0 2rem;
}

.tab-btn {
  font-family   : 'Josefin Sans', sans-serif;
  font-size     : 0.68rem;
  letter-spacing: 0.22em;
  font-weight   : 400;
  color         : rgba(240, 233, 214, 0.45);
  background    : none;
  border        : none;
  padding       : 1.4rem 2rem;
  cursor        : pointer;
  position      : relative;
  transition    : color 0.3s;
}

.tab-btn::after {
  content         : '';
  position        : absolute;
  bottom          : 0;
  left            : 0;
  width           : 100%;
  height          : 2px;
  background      : var(--gold);
  transform       : scaleX(0);
  transition      : transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:hover {
  color: rgba(240, 233, 214, 0.70);
}

.tab-btn.active {
  color: var(--gilt);
}

.tab-btn.active::after {
  transform: scaleX(1);
}


/* --------------------------------------------------------------------------
   MAIN WRAPPER
   -------------------------------------------------------------------------- */

.main {
  max-width: 1100px;
  margin   : 0 auto;
  padding  : 5rem 2rem 7rem;
}


/* --------------------------------------------------------------------------
   COURSE SECTIONS (tab panels)
   -------------------------------------------------------------------------- */

.course-section {
  display: none;
}

.course-section.active {
  display: block;
}


/* --------------------------------------------------------------------------
   COURSE OVERVIEW CARDS
   -------------------------------------------------------------------------- */

.overview-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 1.5px;
  background           : rgba(184, 149, 58, 0.06);
  border               : 1px solid rgba(184, 149, 58, 0.06);
  margin-bottom        : 5rem;
}

.overview-card {
  background: var(--pine);
  padding   : 2.5rem 2rem;
  cursor    : pointer;
  position  : relative;
  overflow  : hidden;
  transition: background 0.35s;
}

.overview-card::after {
  content         : '';
  position        : absolute;
  bottom          : 0;
  left            : 0;
  width           : 100%;
  height          : 2px;
  background      : var(--gold);
  transform       : scaleX(0);
  transform-origin: left;
  transition      : transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.overview-card:hover {
  background: rgba(28, 61, 36, 0.80);
}

.overview-card:hover::after {
  transform: scaleX(1);
}

.ov-letter {
  font-family: 'Playfair Display', serif;
  font-size  : 5rem;
  font-weight: 900;
  color      : rgba(184, 149, 58, 0.12);
  line-height: 1;
  margin-bottom: 0.5rem;
  transition : color 0.3s;
}

.overview-card:hover .ov-letter {
  color: rgba(184, 149, 58, 0.25);
}

.ov-tag {
  font-size     : 0.58rem;
  letter-spacing: 0.30em;
  color         : var(--gilt);
  margin-bottom : 0.6rem;
  font-weight   : 600;
}

.ov-title {
  font-family  : 'Playfair Display', serif;
  font-size    : 1.5rem;
  font-weight  : 700;
  color        : var(--cream);
  margin-bottom: 0.7rem;
}

.ov-desc {
  font-size  : 0.76rem;
  color      : rgba(240, 233, 214, 0.45);
  line-height: 1.7;
}

.ov-link {
  display       : inline-flex;
  align-items   : center;
  gap           : 0.5rem;
  font-size     : 0.62rem;
  letter-spacing: 0.18em;
  color         : var(--gilt);
  margin-top    : 1.2rem;
  transition    : gap 0.3s;
}

.overview-card:hover .ov-link {
  gap: 0.8rem;
}


/* --------------------------------------------------------------------------
   COURSE HERO LAYOUT (detail tabs)
   -------------------------------------------------------------------------- */

.course-hero {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 5rem;
  align-items          : center;
  margin-bottom        : 5rem;
  padding-bottom       : 5rem;
  border-bottom        : 1px solid rgba(184, 149, 58, 0.10);
}

.course-hero.reverse {
  direction: rtl;
}

.course-hero.reverse > * {
  direction: ltr;
}

/* Image */
.course-img-wrap {
  position: relative;
}

.course-img-frame {
  position      : absolute;
  top           : -14px;
  left          : -14px;
  right         : 14px;
  bottom        : 14px;
  border        : 1px solid rgba(184, 149, 58, 0.20);
  pointer-events: none;
  z-index       : 1;
}

.course-img {
  width       : 100%;
  aspect-ratio: 4 / 3;
  object-fit  : cover;
  position    : relative;
  z-index     : 2;
  display     : block;
}

.course-img-placeholder {
  width            : 100%;
  aspect-ratio     : 16 / 9;
  background-color : #0a1a0c;
}

.course-num {
  position      : absolute;
  top           : -2rem;
  right         : 1rem;
  font-family   : 'Playfair Display', serif;
  font-size     : 8rem;
  font-weight   : 900;
  color         : rgba(184, 149, 58, 0.06);
  line-height   : 1;
  z-index       : 0;
  pointer-events: none;
}

/* Info */
.course-tag {
  font-size     : 0.60rem;
  letter-spacing: 0.35em;
  color         : var(--gilt);
  font-weight   : 600;
  margin-bottom : 1rem;
  display       : flex;
  align-items   : center;
  gap           : 0.8rem;
}

.course-tag::before {
  content   : '';
  flex      : 0 0 20px;
  height    : 1px;
  background: var(--gold);
}

.course-title {
  font-family  : 'Playfair Display', serif;
  font-size    : clamp(2.2rem, 4vw, 3.5rem);
  font-weight  : 900;
  line-height  : 1.05;
  color        : var(--linen);
  margin-bottom: 1.5rem;
}

.course-title em {
  font-style: italic;
  font-weight: 400;
  color      : var(--gilt);
}

.course-meta {
  display       : flex;
  gap           : 2rem;
  flex-wrap     : wrap;
  padding       : 1.5rem 0;
  border-top    : 1px solid rgba(184, 149, 58, 0.10);
  border-bottom : 1px solid rgba(184, 149, 58, 0.10);
  margin-bottom : 2rem;
}

.meta-item label {
  font-size     : 0.58rem;
  letter-spacing: 0.28em;
  color         : rgba(240, 233, 214, 0.40);
  display       : block;
  margin-bottom : 0.3rem;
}

.meta-item value {
  font-family: 'Playfair Display', serif;
  font-size  : 1.4rem;
  font-weight: 700;
  color      : var(--gilt);
  display    : block;
}

.course-desc {
  font-size  : 0.85rem;
  line-height: 1.95;
  color      : rgba(240, 233, 214, 0.58);
  margin-bottom: 1.4rem;
}


/* --------------------------------------------------------------------------
   HOLE CARDS
   -------------------------------------------------------------------------- */

.holes-title {
  font-size     : 0.62rem;
  letter-spacing: 0.30em;
  font-weight   : 600;
  color         : var(--gilt);
  margin-bottom : 1.5rem;
  display       : flex;
  align-items   : center;
  gap           : 0.8rem;
}

.holes-title::before {
  content   : '';
  width     : 18px;
  height    : 1px;
  background: var(--gold);
}

.holes-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap                  : 1px;
  background           : rgba(184, 149, 58, 0.06);
  border               : 1px solid rgba(184, 149, 58, 0.06);
}

.hole-card {
  background: var(--pine);
  padding   : 1.4rem;
  transition: background 0.3s;
}

.hole-card:hover {
  background: rgba(28, 61, 36, 0.90);
}

.hole-num {
  font-family  : 'Playfair Display', serif;
  font-size    : 1.8rem;
  font-weight  : 900;
  color        : rgba(184, 149, 58, 0.25);
  line-height  : 1;
  margin-bottom: 0.5rem;
}

.hole-info {
  display  : flex;
  gap      : 0.6rem;
  flex-wrap: wrap;
}

.hole-badge {
  font-size     : 0.58rem;
  letter-spacing: 0.15em;
  padding       : 3px 10px;
  border        : 1px solid rgba(184, 149, 58, 0.25);
  color         : rgba(240, 233, 214, 0.50);
}

.hole-badge.gold {
  border-color: rgba(184, 149, 58, 0.50);
  color       : var(--gilt);
}


/* --------------------------------------------------------------------------
   RESPONSIVE — COURSE
   -------------------------------------------------------------------------- */

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

  .course-hero {
    grid-template-columns: 1fr;
    gap                  : 3rem;
  }

  .course-hero.reverse {
    direction: ltr;
  }
}

@media (max-width: 768px) {
  .tabs {
    overflow-x: auto;
  }

  .tab-btn {
    white-space: nowrap;
    padding    : 1.2rem 1.4rem;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .holes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   OVERVIEW STATS BAR
   -------------------------------------------------------------------------- */

.overview-stats {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 1.5px;
  background           : rgba(184, 149, 58, 0.06);
  border               : 1px solid rgba(184, 149, 58, 0.06);
}

.ov-stat {
  background : var(--pine);
  padding    : 2.5rem;
  text-align : center;
}

.ov-stat big {
  font-family: 'Playfair Display', serif;
  font-size  : 3.5rem;
  font-weight: 900;
  color      : var(--gilt);
  line-height: 1;
  display    : block;
}

.ov-stat small {
  font-size     : 0.60rem;
  letter-spacing: 0.28em;
  color         : rgba(240, 233, 214, 0.40);
  margin-top    : 0.4rem;
  display       : block;
}

/* HCP badge variant */
.hole-badge--hcp {
  border-color: rgba(212, 175, 90, 0.55);
  color       : var(--gilt);
}

/* Small description modifier */
.course-desc--sm {
  font-size: 0.80rem;
}

.course-desc--sm strong {
  color: var(--gilt);
}