/* ==========================================================================
   Training  (/resources/trainings/)

   Self-paced learning today; the course offer is held for its owner (TN1).
   Shared, from stylesheets already linked: the page banner, .pf-related
   (product-family.css). Page-local:
     .trn-card      one kind of self-paced material
     .trn-item      a tutorial webinar
     .trn-boundary  commercial training or the University Program
     .trn-courses   the held course block (styles ready for when it ships)

     §1 banner white · §2 self-paced neutral-2-100 · §3 tutorials white ·
     §4 boundary white · §5 related neutral-2-100
   ========================================================================== */

#self-paced,#tutorials,#courses{scroll-margin-top:24px}

/* §1 Banner */
.trn-banner .page-banner__body p{margin:0}
.trn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.trn-actions__link{
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.trn-actions__link:hover{color:var(--ps-color-brand-500)}

/* Bands */
.trn-selfpaced,.trn-tutorials,.trn-courses{padding-block:48px}
.trn-band__head,.trn-cards,.trn-list,.trn-boundary__box,.trn-formats,.trn-catalogue,.trn-courses__book{grid-column-end:span var(--ps-grid-columns)}
.trn-band__head{margin-bottom:28px}
.trn-band__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.trn-band__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.trn-selfpaced,.trn-related{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}
.trn-tutorials,.trn-boundary{background:var(--sv-white)}

.trn-tag{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);
  font:500 11px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
}
.trn-tag--gated{border-color:var(--ps-color-neutral-2-500)}

/* §2 Self-paced */
.trn-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.trn-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 22px 20px;
}
.trn-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.trn-card__count{font:500 13px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600)}
.trn-card__name{margin:0;color:var(--ps-color-neutral-3-500)}
.trn-card__body{margin:0;flex:1 1 auto;font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}

/* §3 Tutorials */
.trn-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ps-color-neutral-2-300)}
.trn-item{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.trn-item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font:500 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.trn-item__area{display:inline-flex;padding:2px 9px;border-radius:999px;background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);font:500 11px/16px var(--ps-font);color:var(--ps-color-neutral-3-500)}
.trn-item__title{font:500 16px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600);max-width:80ch}
.trn-item__title:hover{color:var(--ps-color-brand-500);text-decoration:underline;text-underline-offset:2px}
.trn-item__who{margin:0;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.trn-item__who a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.trn-item__label{margin-right:4px;font-weight:500;color:var(--ps-color-neutral-3-500)}
.trn-item__access{margin:2px 0 0}

/* §4 Boundary */
.trn-boundary{padding-block:0 48px}
.trn-boundary__box{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.trn-boundary__title{margin:0;color:var(--ps-color-neutral-3-500)}
.trn-boundary__body{margin:0;max-width:72ch;font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}

/* The held course block (TN1) */
.trn-formats{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.trn-format{background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:20px}
.trn-format__name{margin:0 0 6px}
.trn-format__body{margin:0;color:var(--ps-color-secondary-5-500)}
.trn-catalogue{width:100%;border-collapse:collapse;font:400 14px/20px var(--ps-font)}
.trn-catalogue th,.trn-catalogue td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.trn-courses__book{margin:20px 0 0}

/* Breakpoints */
@media (min-width:640px){
  .trn-selfpaced,.trn-tutorials,.trn-courses{padding-block:64px}
  .trn-boundary{padding-block:0 64px}
  .trn-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .trn-formats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trn-boundary__box{padding:28px 30px}
}
@media (min-width:1024px){
  .trn-selfpaced,.trn-tutorials,.trn-courses{padding-block:80px}
  .trn-boundary{padding-block:0 80px}
  .trn-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trn-formats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1350px){
  .trn-band__head,.trn-cards,.trn-list,.trn-boundary__box,.trn-formats,.trn-catalogue,.trn-courses__book,.trn-related .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}