/* =====================================================
   COURSE DETAIL PAGE - CLEAN DESIGN SYSTEM (Drupal)
   Targets:
   .page-node-type-rekhatama-course
   .node--type-rekhatama-course
===================================================== */


/* =====================================================
   1. PAGE LEVEL
===================================================== */

.page-node-type-rekhatama-course {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  background-color: #f8fafc !important;
  color: #1e293b;
}


/* =====================================================
   2. BREADCRUMB
===================================================== */

.page-node-type-rekhatama-course .breadcrumb {
  padding: 16px 0;
  margin-bottom: 12px;
  background: transparent;
}

.page-node-type-rekhatama-course .breadcrumb-item,
.page-node-type-rekhatama-course .breadcrumb-item a {
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.page-node-type-rekhatama-course .breadcrumb-item a:hover {
  color: #0057d9;
}


/* =====================================================
   3. DEFAULT DRUPAL PAGE TITLE
   Hidden because Title comes from Layout Builder
===================================================== */

.page-node-type-rekhatama-course
#block-rekhatama-theme-page-title {
  display: none !important;
}


/* =====================================================
   4. COURSE NODE
===================================================== */

.node--type-rekhatama-course {
  background: transparent;
}


/* =====================================================
   5. LAYOUT BUILDER COURSE TITLE
===================================================== */
/*
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle {
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin: 0 0 32px;
  padding: 0 0 24px;
  border-bottom: 1px solid #e2e8f0;
}
*/

/* Remove unnecessary default field spacing */
/*
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle .field {
  margin: 0;
}
*/

/* Layout Builder Title */
/*
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle .field__item,
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle .field--name-title {
  margin: 0;
  padding: 0;

  max-width: 1000px;

  color: #0f172a;

  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 900;
  line-height: 1.15;

  letter-spacing: -0.035em;
  overflow-wrap: break-word;
}
*/

/* In case Drupal renders link */
/*
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle a {
  color: #0f172a;
  text-decoration: none;
}
*/

/* =====================================================
   COURSE TITLE - FONT STYLE ONLY
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle {
  display: block !important;
  margin: 0 0 28px;
}

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle .field__item,
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursetitle .field--name-title {
  margin: 0;
  padding: 0;

  color: #132d5b;

  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;

  letter-spacing: -0.045em;

  max-width: 1100px;
}

/* =====================================================
   6. MAIN TWO COLUMN LAYOUT
===================================================== */

.node--type-rekhatama-course
.layout--twocol-section--67-33 {
  display: flex;
  flex-wrap: wrap;

  gap: 48px;

  margin: 0 0 48px;

  align-items: flex-start;
}


/* =====================================================
   7. LEFT COLUMN
===================================================== */

.node--type-rekhatama-course
.layout--twocol-section--67-33
.layout__region--first {

  flex: 1 1 60%;

  min-width: 320px;
  max-width: 100%;
}


/* =====================================================
   8. RIGHT COLUMN
===================================================== */

.node--type-rekhatama-course
.layout--twocol-section--67-33
.layout__region--second {

  flex: 0 0 360px;

  width: 360px;
  max-width: 100%;

  position: sticky;

  top: 40px;

  z-index: 10;
}


/* =====================================================
   9. SHORT DESCRIPTION
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-short-description {

  font-size: 1.15rem;
  line-height: 1.8;

  color: #475569;

  font-weight: 500;

  margin-bottom: 40px;

  position: relative;

  padding-left: 24px;

  border-left: 4px solid #0057d9;
}


/* =====================================================
   10. LEFT COLUMN FIELD HEADINGS
===================================================== */

.node--type-rekhatama-course
.layout__region--first
.field__label {

  display: block;

  font-size: 1.5rem;
  font-weight: 800;

  color: #0f172a;

  margin-top: 44px;
  margin-bottom: 24px;

  border-bottom: 2px solid #e2e8f0;

  padding-bottom: 12px;

  position: relative;

  letter-spacing: -0.02em;
}


/* Blue underline */
.node--type-rekhatama-course
.layout__region--first
.field__label::after {

  content: "";

  position: absolute;

  bottom: -2px;
  left: 0;

  width: 70px;
  height: 2px;

  background: #0057d9;
}


/* =====================================================
   11. TARGET AUDIENCE
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-target-audience ul {

  list-style: none;

  padding-left: 0;

  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(260px, 1fr));

  gap: 16px;

  margin-bottom: 40px;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-target-audience ul li {

  position: relative;

  padding: 16px 20px 16px 48px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  font-size: 0.98rem;
  font-weight: 600;

  color: #334155;

  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.02);

  transition: all 0.2s ease;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-target-audience ul li:hover {

  border-color: #bfdbfe;

  background: #f8fafc;

  transform: translateY(-2px);

  box-shadow:
    0 6px 16px rgba(0, 87, 217, 0.05);
}


/* Circle */
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-target-audience ul li::before {

  content: "";

  position: absolute;

  left: 18px;
  top: 50%;

  transform: translateY(-50%);

  width: 20px;
  height: 20px;

  background-color: #e0f2fe;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;
}


/* Check icon */
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-target-audience ul li::after {

  content: "\2713";

  position: absolute;

  left: 24px;
  top: 50%;

  transform: translateY(-50%);

  color: #0369a1;

  font-weight: 800;

  font-size: 0.85rem;
}


/* =====================================================
   12. LEARNING OUTCOMES
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-learning-outcomes ol {

  list-style: none;

  padding-left: 0;

  margin-bottom: 40px;

  display: flex;

  flex-direction: column;

  gap: 16px;

  counter-reset: outcome-counter;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-learning-outcomes ol li {

  position: relative;

  padding: 16px 20px 16px 56px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  font-size: 0.98rem;

  line-height: 1.6;

  color: #334155;

  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.02);

  counter-increment: outcome-counter;

  transition: all 0.2s ease;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-learning-outcomes ol li:hover {

  border-color: #cbd5e1;

  background: #f8fafc;

  transform: translateY(-1px);
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-learning-outcomes ol li::before {

  content: counter(outcome-counter);

  position: absolute;

  left: 18px;
  top: 50%;

  transform: translateY(-50%);

  width: 26px;
  height: 26px;

  background: #0057d9;

  color: #ffffff;

  font-size: 0.85rem;

  font-weight: 800;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;
}


/* =====================================================
   13. CURRICULUM
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 16px;

  padding: 32px;

  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.03);
}


/* Curriculum heading */
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item > h3 {

  font-size: 1.15rem;

  font-weight: 800;

  color: #0f172a;

  background: transparent;

  border-left: 4px solid #0057d9;

  border-top: none;
  border-right: none;
  border-bottom: none;

  padding: 0 0 0 14px;

  margin-top: 36px;

  margin-bottom: 12px;

  border-radius: 0;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item > h3:first-of-type {

  margin-top: 0;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item > h3:not(:first-of-type) {

  border-top: 1px solid #f1f5f9;

  padding-top: 28px;

  margin-top: 40px;
}


/* Curriculum paragraphs */
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item > p {

  background: transparent;

  border: none;

  padding: 0 0 0 18px;

  margin: 0 0 12px 0;

  color: #475569;

  font-size: 0.96rem;

  line-height: 1.7;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item > p:first-of-type {

  padding-top: 0;
}


/* Curriculum lists */
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item > ul {

  background: transparent;

  border: none;

  padding: 0 0 0 36px;

  margin: 0 0 24px 0;

  border-radius: 0;

  list-style-type: disc;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-curriculum
.field__item > ul li {

  margin-bottom: 6px;

  color: #475569;

  font-size: 0.94rem;

  line-height: 1.65;
}


/* =====================================================
   14. RIGHT SIDEBAR CARD
===================================================== */

.node--type-rekhatama-course
.layout__region--second {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 24px;

  padding: 32px;

  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.06);

  transition: all 0.3s ease;
}


.node--type-rekhatama-course
.layout__region--second:hover {

  transform: translateY(-2px);

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.1);
}


/* =====================================================
   15. FEATURED IMAGE
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-featured-image {

  margin-bottom: 24px;

  border-radius: 16px;

  overflow: hidden;

  box-shadow:
    0 8px 16px rgba(15, 23, 42, 0.05);
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-featured-image img {

  width: 100%;

  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  display: block;
}


/* =====================================================
   16. SIDEBAR FIELD BLOCKS
===================================================== */

.node--type-rekhatama-course
.layout__region--second
.block:not(
  .block-field-blocknoderekhatama-coursefield-featured-image
) {

  margin-bottom: 0;
}


/* Sidebar information rows */
.node--type-rekhatama-course
.layout__region--second
.field:not(
  .field--name-field-cta-link
):not(
  .field--name-field-price-text
) {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  padding: 14px 0;

  border-bottom:
    1px dashed #e2e8f0;
}


/* Sidebar labels */
.node--type-rekhatama-course
.layout__region--second
.field__label {

  font-size: 0.82rem;

  text-transform: uppercase;

  color: #64748b;

  letter-spacing: 0.04em;

  font-weight: 700;

  margin-bottom: 0;

  white-space: nowrap;
}


/* Sidebar values */
.node--type-rekhatama-course
.layout__region--second
.field__item,

.node--type-rekhatama-course
.layout__region--second
.field__items {

  font-size: 0.95rem;

  color: #0f172a;

  font-weight: 700;

  text-align: right;
}


.node--type-rekhatama-course
.layout__region--second
.field__items {

  display: flex;

  gap: 6px;
}


/* =====================================================
   17. DELIVERY / TRAINING MODE
===================================================== */

.field--name-field-delivery-mode .field__items,
.field--name-field-training-mode .field__items {

  display: flex;

  flex-wrap: nowrap;

  justify-content: flex-end;

  gap: 4px;

  align-items: center;
}


.field--name-field-delivery-mode .field__item,
.field--name-field-training-mode .field__item {

  white-space: nowrap;

  font-size: 0.88rem;
}


.field--name-field-delivery-mode
.field__item:not(:last-child)::after,

.field--name-field-training-mode
.field__item:not(:last-child)::after {

  content: "|";

  margin-left: 4px;

  color: #94a3b8;

  font-weight: bold;

  display: inline-block;
}


/* Links */
.node--type-rekhatama-course
.layout__region--second
.field__item a,

.node--type-rekhatama-course
.layout__region--second
.field__items a {

  color: #0057d9;

  text-decoration: none;
}


.node--type-rekhatama-course
.layout__region--second
.field__item a:hover,

.node--type-rekhatama-course
.layout__region--second
.field__items a:hover {

  text-decoration: underline;
}


/* =====================================================
   18. PRICE BOX
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-price-text {

  background:
    linear-gradient(
      135deg,
      #eff6ff 0%,
      #dbeafe 100%
    );

  border: 1px solid #bfdbfe;

  border-radius: 16px;

  padding: 16px 20px;

  margin: 24px 0 16px !important;

  text-align: center;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-price-text
.field__item {

  color: #1e40af;

  font-size: 1.08rem;

  font-weight: 800;

  line-height: 1.4;

  word-break: break-word;
}


/* =====================================================
   19. PRIMARY CTA
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-cta-link {

  margin-bottom: 0;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-cta-link a {

  display: flex !important;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 50px;

  padding: 12px 20px;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #0057d9 0%,
      #0046ad 100%
    );

  color: #ffffff !important;

  font-weight: 700;

  font-size: 1.02rem;

  text-decoration: none;

  box-shadow:
    0 10px 24px rgba(0, 87, 217, 0.22);

  transition: all 0.2s ease;

  text-transform: uppercase;

  letter-spacing: 0.03em;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-cta-link a:hover {

  background:
    linear-gradient(
      135deg,
      #0062eb 0%,
      #004fb8 100%
    );

  transform: translateY(-2px);

  box-shadow:
    0 14px 28px rgba(0, 87, 217, 0.32);

  text-decoration: none !important;
}


/* =====================================================
   20. BROCHURE DOWNLOAD
===================================================== */

.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-brochure-file {

  margin-top: 14px;

  border-top: none !important;

  padding-top: 0 !important;
}


/* Hide brochure field label */
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-brochure-file
.field__label {

  display: none !important;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-brochure-file a {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 44px;

  padding: 8px 16px;

  border-radius: 12px;

  background: #f1f5f9;

  border: 1px solid #e2e8f0;

  color: #475569;

  font-weight: 600;

  font-size: 0.88rem;

  text-decoration: none;

  transition: all 0.15s ease;
}


.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-brochure-file a:hover {

  background: #e2e8f0;

  border-color: #cbd5e1;

  color: #0f172a;

  text-decoration: none;
}


/* Download icon */
.node--type-rekhatama-course
.block-field-blocknoderekhatama-coursefield-brochure-file a::before {

  content: "\2193";

  margin-right: 8px;

  font-size: 1rem;

  font-weight: 900;
}


/* =====================================================
   21. AVAILABLE SCHEDULE BLOCK
===================================================== */

.node--type-rekhatama-course
.views-element-container {

  margin-top: 56px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 24px;

  padding: 36px;

  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.04);
}


/* Schedule block title */
.node--type-rekhatama-course
.views-element-container h2 {

  font-size: 1.5rem;

  font-weight: 850;

  color: #0f172a;

  margin-top: 0;

  margin-bottom: 24px;

  border-bottom: 2px solid #f1f5f9;

  padding-bottom: 14px;

  position: relative;

  letter-spacing: -0.02em;
}


.node--type-rekhatama-course
.views-element-container h2::after {

  content: "";

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 90px;

  height: 2px;

  background: #0057d9;
}


/* =====================================================
   22. SCHEDULE TABLE
===================================================== */

.node--type-rekhatama-course
.views-table {

  width: 100%;

  border-collapse: separate;

  border-spacing: 0;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  overflow: hidden;
}


/* Header */
.node--type-rekhatama-course
.views-table th {

  background: #f8fafc;

  color: #64748b;

  font-size: 0.8rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 16px 18px;

  border-bottom: 2px solid #e2e8f0;
}


/* Table rows */
.node--type-rekhatama-course
.views-table td {

  padding: 16px 18px;

  vertical-align: middle;

  border-bottom: 1px solid #e2e8f0;

  color: #334155;

  font-size: 0.94rem;
}


.node--type-rekhatama-course
.views-table tbody tr:last-child td {

  border-bottom: 0;
}


.node--type-rekhatama-course
.views-table tbody tr:hover td {

  background: #f8fafc;
}


/* Batch Name */
.node--type-rekhatama-course
.views-field-field-batch-name {

  font-weight: 700;

  color: #0f172a;
}


/* Delivery Mode */
.node--type-rekhatama-course
.views-field-field-delivery-mode a {

  display: inline-flex;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 700;

  text-decoration: none;

  background: #f1f5f9;

  color: #475569;
}


/* Online taxonomy */
.node--type-rekhatama-course
.views-table td a[href*="taxonomy/term/13"] {

  background: #e0f2fe;

  color: #0369a1;
}


/* Offline taxonomy */
.node--type-rekhatama-course
.views-table td a[href*="taxonomy/term/14"] {

  background: #fef3c7;

  color: #b45309;
}


/* Schedule status */
.node--type-rekhatama-course
.views-field-field-schedule-status {

  font-weight: 700;

  color: #16a34a;
}


/* Schedule CTA */
.node--type-rekhatama-course
.views-field-field-cta-link a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 8px 16px;

  background: #0057d9;

  color: #ffffff !important;

  font-weight: 700;

  font-size: 0.86rem;

  border-radius: 10px;

  text-decoration: none;

  transition: all 0.2s ease;

  box-shadow:
    0 4px 12px rgba(0, 87, 217, 0.12);
}


.node--type-rekhatama-course
.views-field-field-cta-link a:hover {

  background: #0046ad;

  transform: translateY(-1px);

  box-shadow:
    0 6px 16px rgba(0, 87, 217, 0.22);

  text-decoration: none !important;
}


/* =====================================================
   23. RESPONSIVE - TABLET
===================================================== */

@media (max-width: 992px) {

  .node--type-rekhatama-course
  .layout--twocol-section--67-33 {

    flex-direction: column;

    gap: 32px;
  }


  .node--type-rekhatama-course
  .layout--twocol-section--67-33
  .layout__region--first,

  .node--type-rekhatama-course
  .layout--twocol-section--67-33
  .layout__region--second {

    flex: 1 1 100%;

    width: 100%;

    max-width: 100%;
  }


  .node--type-rekhatama-course
  .layout__region--second {

    position: static;

    margin-top: 16px;
  }


  .node--type-rekhatama-course
  .layout__region--second
  .field:not(
    .field--name-field-cta-link
  ):not(
    .field--name-field-price-text
  ) {

    padding: 10px 0;
  }
}


/* =====================================================
   24. RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 768px) {

  /* Title */
  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursetitle {

    margin-bottom: 26px;

    padding-bottom: 20px;
  }


  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursetitle
  .field__item,

  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursetitle
  .field--name-title {

    font-size: 2rem;

    line-height: 1.2;
  }


  /* Short description */
  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursefield-short-description {

    font-size: 1rem;

    line-height: 1.7;

    padding-left: 18px;

    margin-bottom: 32px;
  }


  /* Target Audience */
  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursefield-target-audience ul {

    grid-template-columns: 1fr;
  }


  /* Curriculum */
  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursefield-curriculum
  .field__item {

    padding: 22px;
  }


  /* Sidebar */
  .node--type-rekhatama-course
  .layout__region--second {

    padding: 24px;

    border-radius: 18px;
  }


  /* Schedule Block */
  .node--type-rekhatama-course
  .views-element-container {

    padding: 24px;
  }


  /* Schedule Table */
  .node--type-rekhatama-course
  .views-table {

    display: block;

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }
}


/* =====================================================
   25. RESPONSIVE - SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursetitle
  .field__item,

  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursetitle
  .field--name-title {

    font-size: 1.75rem;

    line-height: 1.22;
  }


  .node--type-rekhatama-course
  .layout__region--second {

    padding: 20px;
  }


  .node--type-rekhatama-course
  .layout__region--second
  .field:not(
    .field--name-field-cta-link
  ):not(
    .field--name-field-price-text
  ) {

    align-items: flex-start;

    gap: 8px;
  }


  .node--type-rekhatama-course
  .layout__region--second
  .field__item,

  .node--type-rekhatama-course
  .layout__region--second
  .field__items {

    font-size: 0.88rem;
  }


  .node--type-rekhatama-course
  .block-field-blocknoderekhatama-coursefield-target-audience ul li {

    padding-right: 14px;
  }
}