/* cc-content-pages course blocks (in-article card, end-of-post promo, Courses in this post).
 * :is(#ccp,body) gives every rule the same weight on our post page (inside #ccp) and anywhere else
 * the block renders, so theme and post-text rules cannot reach in. Values from the approved mockup. */
:is(#ccp,body) .ccp-course-card,:is(#ccp,body) .ccp-course-promo,:is(#ccp,body) .ccp-courses-in{font:400 16px/24px 'cc-lato','Helvetica Neue',Arial,sans-serif;color:#1F2124;text-align:left}
:is(#ccp,body) .ccp-course-card{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;align-items:stretch;padding:0;margin-block:40px;border:1px solid #E3E6EA;border-radius:8px;overflow:hidden;background:#fff}
:is(#ccp,body) .ccp-course-card .ccp-course-b{padding:24px;justify-content:center}
/* The picture carries the card and the promo (Philip 11-04): a gray frame (#EDEDED, the art's own
   background) fills the left side at full height (the top on a phone, 3:2), and the whole picture sits
   inside it with room around it: 24px above and below and 40px each side on desktop, 16px on a phone
   (threads abe08e55 "a bit smaller so it fits better in the box", 1e069eae "a bit more space on either
   side of the image"; sizing from Post parts v29). */
:is(#ccp,body) .ccp-course-ph{display:block;position:relative;overflow:hidden;min-height:220px;background:#EDEDED}
:is(#ccp,body) .ccp-course-ph .ccp-course-img{position:absolute;inset:24px 40px;width:calc(100% - 80px);height:calc(100% - 48px);object-fit:contain;object-position:50% 50%;transform:none;border-radius:0;display:block;margin:0;max-width:none;background:none}
:is(#ccp,body) :is(.ccp-course-card--noimg,.ccp-course-promo--noimg){grid-template-columns:minmax(0,1fr)}
:is(#ccp,body) .ccp-course-b{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
:is(#ccp,body) .ccp-course-label{font:700 12px/16px 'cc-lato','Helvetica Neue',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5D6570}
:is(#ccp,body) .ccp-course-h{display:block;font:700 20px/26px 'cc-lora',Georgia,serif;color:#14294A;margin-bottom:4px}
:is(#ccp,body) .ccp-course-pitch{display:block}
:is(#ccp,body) .ccp-course-facts{display:block;font-size:14px;line-height:20px;color:#5D6570}
:is(#ccp,body) .ccp-course-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:700 14px/20px 'cc-lato','Helvetica Neue',Arial,sans-serif;color:#2B5C9A;text-decoration:none}
:is(#ccp,body) .ccp-course-link:hover{text-decoration:underline}
:is(#ccp,body) .ccp-course-link svg{width:18px;height:18px;flex:none}
:is(#ccp,body) .ccp-course-promo{background:#1F7A5A;color:#fff;border-radius:8px;padding:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;align-items:stretch;overflow:hidden;margin-block:48px 0}
:is(#ccp,body) .ccp-course-promo .ccp-course-b{gap:8px;padding:32px;justify-content:center}
:is(#ccp,body) .ccp-course-promo .ccp-course-h,:is(#ccp,body) .ccp-course-promo .ccp-course-label,:is(#ccp,body) .ccp-course-promo .ccp-course-facts{color:#fff}
:is(#ccp,body) .ccp-course-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:4px;font:700 16px/1.2 'cc-lato','Helvetica Neue',Arial,sans-serif;text-decoration:none;border:0;margin-top:4px}
:is(#ccp,body) .ccp-course-btn--gold{background:#F5B000;color:#1F2124}
:is(#ccp,body) .ccp-course-btn--gold:hover{box-shadow:inset 0 0 0 2px #7A5200;color:#1F2124}
:is(#ccp,body) .ccp-course-btn--white{background:#fff;color:#2B5C9A}
:is(#ccp,body) .ccp-course-btn--white:hover{background:#EEF3F9;color:#2B5C9A}
:is(#ccp,body) .ccp-course-btn:focus-visible,:is(#ccp,body) .ccp-course-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
:is(#ccp,body) .ccp-course-card .ccp-course-link:focus-visible{outline-color:#14294A}
:is(#ccp,body) .ccp-courses-in{margin-block:40px}
:is(#ccp,body) .ccp-courses-h{display:block;font:700 20px/26px 'cc-lora',Georgia,serif;color:#14294A;margin-bottom:8px}
@media (max-width:767px){
:is(#ccp,body) .ccp-course-card,:is(#ccp,body) .ccp-course-promo{grid-template-columns:minmax(0,1fr)}
:is(#ccp,body) .ccp-course-ph{min-height:0;aspect-ratio:3/2}
:is(#ccp,body) .ccp-course-ph .ccp-course-img{inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain}
:is(#ccp,body) .ccp-course-card .ccp-course-b{padding:16px 16px 20px}
:is(#ccp,body) .ccp-course-promo .ccp-course-b{padding:24px 16px}
}
/* "Courses in this post" rows (the block and the post page's after-section). */
:is(#ccp,body) .ccp-rc{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding-block:12px;border-top:1px solid #E3E6EA;color:#1F2124;text-decoration:none}
:is(#ccp,body) .ccp-rc:hover{text-decoration:none}
:is(#ccp,body) .ccp-rc:hover b{text-decoration:underline}
:is(#ccp,body) .ccp-rc img,:is(#ccp,body) .ccp-rc .ccp-rc-blank{width:72px;height:72px;border-radius:8px;object-fit:cover;background:#F5F7FA;display:block;margin:0;max-width:none}
:is(#ccp,body) .ccp-rc-t{display:flex;flex-direction:column;min-width:0}
:is(#ccp,body) .ccp-rc-t b{display:block;font:700 16px/24px 'cc-lora',Georgia,serif;color:#14294A}
:is(#ccp,body) .ccp-rc-t>span{display:block;font:400 14px/20px 'cc-lato','Helvetica Neue',Arial,sans-serif;color:#5D6570}
/* WooCommerce's own price markup inside the facts lines: keep it inline, as the shop shows it. */
:is(#ccp,body) .ccp-price,:is(#ccp,body) .ccp-price :not(.screen-reader-text){display:inline;font:inherit;color:inherit}
:is(#ccp,body) .ccp-price ins{text-decoration:none}
:is(#ccp,body) .ccp-price del{opacity:.75;margin-right:4px}