/* ============================================================================
   CLASS PAGE LAYOUT STYLES
   ============================================================================

   Purpose: Custom styles for individual class pages (Outline id=6)

   This file loads on ALL Dahlia front-end pages via top.php.
   Styles are scoped to .class-page wrapper to prevent conflicts.

   Related files:
   - dahlia-local/ooo/modules/atc/class-page-dom-wireframe.html (design reference)
   - Outline id=6 in database (HTML template)

   Breakpoints (matching existing site patterns):
   - Desktop: 1024px+
   - Tablet: 541px - 1023px
   - Mobile: 540px and below

   ============================================================================ */

/* -------------------------------------------
   Individual Class Page Layout (Outline id=6)
   BEM naming convention: .class-page, .class-hero, etc.
   ------------------------------------------- */

/* Brand Colors for CSKEDITOR*/
.brand-blue {
  color: #00a8df !important;
  font-weight: bold !important;
}

.brand-blue-dark {
  color: #182eff !important;
  font-weight: bold !important;
}

.brand-orange {
  color: #f56822 !important;
  font-weight: bold !important;
}

/** Dahlia Page Customizations **/
.dahlia-page-cl .main_color {
  background-color: #efefef;
}
.dahlia-page-cl#top #main .sidebar.sidebar_right.units {
  display: none;
}

.dahlia-page-cl #content {
  width: unset;
}
.responsive .dahlia-page-cl#top .container .av-content-small {
  background-color: white;
  border-radius: 30px;
  margin-top: 2vh;
}

/* Main wrapper */
.class-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3vw;
}

/* -------------------------------------------
   Typography & Text Styling
   ------------------------------------------- */

.class-page h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

.class-page p {
  line-height: 1.6;
}
#top .mobile_atc label {
  font-family: Helvetica, sans-serif;
}

/* ===========================================
   HERO SECTION
   Two-column grid: details left, image right
   =========================================== */

.class-hero {
  margin-bottom: 2rem;
  font-family: Futura, Jost, sans-serif;
}

.class-hero__title {
  margin-bottom: 1.5rem;
  line-height: 1.2 !important;
  color: #00a8df !important;
  font-weight: 500 !important;
  font-size: 40px !important;
  letter-spacing: 1px !important;
}
.class-hero__title i {
  font-style: italic !important;
}

.class-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.class-hero__details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.class-hero__datetime,
.class-hero__location {
  font-size: 28px;
  font-weight: 500;
  line-height: normal;
}
.class-page .class-hero__datetime p,
.class-page .class-hero__location p {
  line-height: normal;
}
.class-hero__holds {
  font-weight: 600;
  color: #555;
  line-height: 1.2;
}

.class-hero__cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 2rem;
  background-color: #f56822 !important;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease;
  min-width: 150px;
  width: 300px;
  max-width: 100%;

  font-size: 21px !important;
  text-align: center;
  border-radius: 3px;
  line-height: 1.2em;

  vertical-align: bottom;
}

.class-hero__cta:hover {
  background-color: #555;
  color: #fff;
}

.class-hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================================
   TWO-COLUMN INFO SECTION
   Benefits left, Instructor lead right
   =========================================== */

.class-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-family: Futura, Jost, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.class-info h2,
.class-info h3,
.class-info h4,
.class-info h5,
.class-info h6 {
  font-weight: 700 !important;
}

.class-info__benefits h2,
.class-info__instructor h2 {
  font-size: 2.75rem !important;
  margin-bottom: 1rem;
}

.class-info__benefits ul,
.class-info__instructor ul {
  padding-left: 2.25rem;
  margin: 0;
  list-style: disc outside;
}

.class-info__benefits li,
.class-info__instructor li {
  margin-bottom: 0.5rem;
}

/* ===========================================
   ACCORDIONS SECTION
   Uses existing instr_blurb clearfix pattern
   =========================================== */

.class-accordions {
  margin-bottom: 2rem;
}

.class-accordions .instr_blurb {
  border-bottom: 1px solid #ddd;
}

.class-accordions .instr_blurb:first-child {
  border-top: 1px solid #ddd;
}

.class-accordions .instr_blurb > h2 {
  cursor: pointer;
  padding: 1rem 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: normal !important;
}

.class-accordions .instr_blurb .open_bio {
  transition: transform 0.2s ease;
}

.class-accordions .instr_blurb.open .open_bio {
  transform: rotate(180deg);
}

.class-accordions .instr_blurb .bio {
}

.class-accordions .instr_blurb.open .bio {
  display: block;
}

/* ===========================================
   SIGNUP/ATC SECTION
   =========================================== */
.class-hold-container {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}
.class-signup {
  padding: 2rem 0;
  margin-bottom: 2rem;
}

/* -------------------------------------------
   Responsive Breakpoints
   ------------------------------------------- */

/* Tablet styles (541px to 1023px) */
@media only screen and (max-width: 1023px) {
}

/* Mobile styles (540px and below) */
@media only screen and (max-width: 540px) {
  .class-hero__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .class-hero__media {
    order: -1; /* Image first on tablet */
  }

  .class-hero__title {
    font-size: 1.5rem;
  }

  .class-hero__cta {
    width: 100%;
    text-align: center;
  }

  .class-info {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1rem 0;
  }

  .class-accordions .instr_blurb h2 {
    font-size: 1rem;
  }
}