/* CoursesCatalogue.html — independent desktop and responsive rules. */
:root{
      --cmpat-blue:#0078D2;
      --cmpat-blue-dark:#0078D2;
      --cmpat-border:#0078D2;
      --cmpat-muted:#6b7280;
      --cmpat-bg:#ffffff;
      --cmpat-soft:#f6f7f9;
    }
    body{
      background:var(--cmpat-bg) !important;
      color:#111827 !important;
    }
    a{ color:var(--cmpat-blue); }
    a:hover{ color:var(--cmpat-blue-dark); }

    .cmpat-wrap{
      width:97%;
      padding-left:1%;
      padding-right:1%;
    }
    .material-symbols-outlined{
      font-size:36px;
      font-weight:normal;
      color:#0078D2;
      vertical-align:middle;
    }

    .cmpat-header{
      background:#ffffff;
      border-bottom-color:#0078D2;
      border-bottom-width:5px;
      border-bottom-style:solid;
    }
    .cmpat-header-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:5px;
      padding:0px 0;
    }
    .cmpat-logo{
      height:85px;
      width:auto;
      display:block;
    }

    .cmpat-title{
      margin:5px 0 8px 0;
      font-size:2rem;
      letter-spacing:0.2px;
    }

    .cmpat-tabs{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:0 0 16px 0;
    }
    .cmpat-tab{
      text-decoration:none;
      padding:8px 12px;
      border:1px solid var(--cmpat-blue);
      border-radius:10px;
      background:var(--cmpat-soft);
      color:var(--cmpat-blue);
      font-weight:bold;
    }
    .cmpat-tab:hover{ font-weight:bold; }
    .cmpat-tab.active{
      background:var(--cmpat-blue);
      border-color:var(--cmpat-blue);
      color:#ffffff;
      font-weight:bold;
    }

    .cmpat-card{
      border:1px solid var(--cmpat-border);
      border-radius:10px;
      padding:10px 10px;
      background:#ffffff;
      box-shadow:0 1px 0 rgba(17,24,39,0.02);
    }

    .cmpat-hero-figure,
    .cmpat-section-figure{
      margin:0;
    }
    .cmpat-hero-figure img,
    .cmpat-section-figure img{
      width:100%;
      height:auto;
      display:block;
      border:1px solid var(--cmpat-border);
      border-radius:10px;
    }
    .cmpat-hero-figure figcaption,
    .cmpat-section-figure figcaption{
      font-size:small;
      opacity:0.85;
      margin-top:0.5em;
      line-height:1.1;
      text-align:justify;
      text-justify:inter-word;
    }

    .cmpat-split{
      display:grid;
      grid-template-columns:1.05fr 0.95fr;
      gap:14px;
      align-items:start;
      margin-top:14px;
    }

    .cmpat-cta{
      display:inline-block;
      margin-top:12px;
      padding:10px 14px;
      border-radius:12px;
      background:var(--cmpat-blue);
      color:#ffffff;
      text-decoration:none;
      font-weight:700;
    }
    .cmpat-cta:hover{ background:var(--cmpat-blue-dark); color:#ffffff; }

    .cmpat-cta-secondary{
      display:inline-block;
      margin-top:12px;
      margin-left:8px;
      padding:10px 14px;
      border-radius:12px;
      border:1px solid var(--cmpat-blue);
      background:var(--cmpat-soft);
      color:var(--cmpat-blue);
      text-decoration:none;
      font-weight:700;
    }

    @media (max-width: 900px){
      .cmpat-split{ grid-template-columns:1fr; }
    }

/* Category chooser: desktop arrangement stays three columns. */
.cmpat-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  align-items: start;
  margin-top: 10px;
}
@media (max-width: 760px) {
  .cmpat-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  .cmpat-category-grid { grid-template-columns: 1fr; gap: 14px; }
  .cmpat-card { padding: 14px; }
}


/* Responsive safeguards, kept inside the catalogue pages (not ../style.css). */
.cmpat-header *, .cmpat-wrap, .cmpat-wrap * { box-sizing: border-box; }
.cmpat-wrap { max-width: 100%; }
.cmpat-header-row > a:first-child { min-width: 0; }
.cmpat-home-icon { display: block; width: 36px; height: 36px; color: #0078D2; flex: none; }
.cmpat-logo { max-width: 100%; object-fit: contain; }
.cmpat-course-card, .cmpat-card { min-width: 0; }
.cmpat-course-title, .cmpat-title { overflow-wrap: break-word; }
.cmpat-course-image, .cmpat-hero-figure img, .cmpat-section-figure img { max-width: 100%; }

/* Compact and tablet screens. Desktop remains three columns. */
@media (max-width: 1000px) {
  .cmpat-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cmpat-header-row { padding: 8px 0; }
  .cmpat-header-row > a:first-child { flex: 1 1 auto; }
  .cmpat-header-row > a:last-child {
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cmpat-logo { height: auto; max-height: 64px; width: auto; }
  .cmpat-wrap { width: 100%; padding-left: 14px; padding-right: 14px; }
  .cmpat-title { font-size: clamp(1.4rem, 5.5vw, 1.8rem); line-height: 1.2; }
  .cmpat-intro-split { grid-template-columns: 1fr; gap: 14px; }
  .cmpat-intro-split p { text-align: left !important; line-height: 1.45 !important; }
  .cmpat-hero-figure img { margin: 0 auto !important; max-width: 220px !important; }
  .cmpat-course-grid { grid-template-columns: 1fr; gap: 12px; }
  .cmpat-course-card { padding: 12px; }
  .cmpat-course-text { line-height: 1.45; }
}
@media (max-width: 600px) {
  .cmpat-cta, .cmpat-cta-secondary {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    text-align: center;
    box-sizing: border-box;
    white-space: normal;
  }
  .cmpat-hero-figure figcaption, .cmpat-section-figure figcaption {
    text-align: left;
    line-height: 1.35;
  }
}
@media (max-width: 360px) {
  .cmpat-wrap { padding-left: 10px; padding-right: 10px; }
  .cmpat-title { font-size: 1.35rem; }
}