/* R2 homepage and /ai-skills/ page. Scoped to .r2 so other pages are unaffected.
   Uses the site's existing palette: ink #0f172a, teal #0f766e, purple #754ffe, muted #475569. */

.r2 { color: #0f172a; }
/* Plain text links. :where() keeps this at low specificity so buttons, tiles and rows keep their own colours. */
.r2 a:where(:not(.r2-btn):not(.initd-course-card-cta)) { color: #0f766e; text-underline-offset: 3px; }
.r2 a:where(:not(.r2-btn):not(.initd-course-card-cta)):hover { color: #0b5b55; }
.r2 a:focus-visible, .r2 .r2-btn:focus-visible { outline: 3px solid #754ffe; outline-offset: 2px; }


.r2-section { padding-block: clamp(3rem, 6vw, 5rem); }
.r2-section + .r2-section { border-top: 1px solid #e2e8f0; }
.r2-section-intro { max-width: 46rem; margin-bottom: 1.5rem; }
.r2-section-intro p:last-child { color: #475569; margin-bottom: 0; }
.r2-section-more { margin: 1.5rem 0 0; font-weight: 600; }

/* Buttons */
.r2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
}
.r2 .r2-btn--primary { background: #0f766e; color: #fff; }
.r2 .r2-btn--primary:hover, .r2 .r2-btn--primary:focus { background: #0b5b55; color: #fff; }
.r2 .r2-btn--ghost { border-color: #0f766e; color: #0f766e; background: transparent; }
.r2 .r2-btn--ghost:hover, .r2 .r2-btn--ghost:focus { background: #ecfdf5; }
.r2-btn--block { width: 100%; }

/* Section headings: one size, no eyebrow labels. */
.r2-h2 { font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15; margin: 0 0 0.5rem; text-wrap: balance; }

/* Hero: a warm tint taken from the illustrations, the next class as a picture card, and a
   short line of proof. One flat colour; no gradient. */
.r2-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: #f7f1e8; }
.r2-hero-grid { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
.r2-hero-title { font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 700; line-height: 1.05; margin-bottom: 1rem; text-wrap: balance; }
.r2-hero-lead { font-size: 1.2rem; color: #334155; max-width: 34rem; }
.r2-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.r2-proof { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; color: #475569; font-size: 0.95rem; }
.r2-proof li { display: flex; align-items: center; min-width: 0; }
@media (min-width: 768px) { .r2-proof li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #c8bba7; margin-right: 1.25rem; } }
@media (max-width: 767px) { .r2-proof { flex-direction: column; align-items: flex-start; } }
.r2 a.r2-proof-rating, .r2 a.r2-proof-teacher { display: inline-flex; align-items: center; gap: 0.5rem; color: #334155; text-decoration: none; }
.r2 a.r2-proof-rating:hover span, .r2 a.r2-proof-teacher:hover span { text-decoration: underline; }
.r2-proof-rating .initd-rating-stars { color: #f59e0b; }
.r2-proof-teacher img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.r2-next-card { background: #fff; border: 1px solid #e7dccb; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.r2-next-cover { display: block; }
.r2-next-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.r2-next-body { padding: 1.25rem 1.5rem 1.5rem; }
.r2-next-label { margin: 0 0 0.35rem; font-size: 0.9rem; color: #475569; }
.r2 .r2-next-title { display: block; font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 600; color: #0f172a; text-decoration: none; line-height: 1.25; }
.r2 .r2-next-title:hover { text-decoration: underline; }
.r2-next-when { margin: 0.5rem 0 0.25rem; color: #334155; }
.r2-next-meta { margin: 0 0 1rem; color: #475569; }
@media (min-width: 992px) {
    .r2-hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
}

/* Hero search: one field; results drop down below it. */
.r2-search { position: relative; margin-top: 1.25rem; max-width: 34rem; }
.r2-search-field { position: relative; }
.r2-search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
.r2-search-field input { width: 100%; min-height: 48px; padding: 0.6rem 1rem 0.6rem 2.6rem; border: 1px solid #d6cdbf; border-radius: 999px; background: #fff; font-size: 1rem; color: #0f172a; }
.r2-search-field input:focus { outline: 3px solid #754ffe; outline-offset: 2px; border-color: #754ffe; }
.r2-search-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.5rem); background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); padding: 0.5rem; }
.r2-search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.r2 a.r2-search-result { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.5rem; border-radius: 0.5rem; color: #0f172a; text-decoration: none; }
.r2 a.r2-search-result:hover, .r2 a.r2-search-result:focus { background: #f1f5f9; outline: none; }
.r2-search-result img { width: 56px; height: 56px; border-radius: 0.375rem; object-fit: cover; }
.r2-search-result-title { display: block; font-weight: 600; line-height: 1.3; }
.r2-search-result-meta { display: block; font-size: 0.85rem; color: #475569; }
.r2-search-none { padding: 0.5rem; }
.r2-search-none-title { font-weight: 600; margin: 0 0 0.35rem; }
.r2-search-request label { display: block; color: #475569; font-size: 0.95rem; margin-bottom: 0.5rem; }
.r2-search-request-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.r2-search-request-row input { flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: 0.5rem 0.85rem; border: 1px solid #cbd5e1; border-radius: 999px; }
.r2-search-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.r2-search-turnstile { margin-top: 0.5rem; }
.r2-search-status { margin: 0.5rem 0 0; font-size: 0.9rem; color: #0f766e; }
.r2-search-status:empty { display: none; }
.r2-search-all { display: block; padding: 0.5rem; font-size: 0.9rem; font-weight: 600; border-top: 1px solid #f1f5f9; margin-top: 0.25rem; }

/* Skills: picture tiles in a scrolling row, intro on the left (Udemy pattern). */
.r2-skills-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 992px) { .r2-skills-layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.5rem; } }
.r2-skills-intro p { color: #475569; margin-bottom: 0.75rem; }
.r2-skills-intro a { font-weight: 600; }
.r2-tiles-wrap { min-width: 0; }
.r2-tiles { list-style: none; margin: 0; padding: 0 0 0.5rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 15rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.r2-tile { scroll-snap-align: start; }
.r2 .r2-tile-inner { position: relative; display: block; border-radius: 0.5rem; overflow: hidden; background: #f4efe6; color: #0f172a; text-decoration: none; height: 100%; }
.r2-tile-inner img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.r2-tile-label { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; background: #fff; border-radius: 0.375rem; padding: 0.7rem 0.85rem; display: grid; gap: 0.15rem; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); }
.r2-tile-name { font-weight: 600; line-height: 1.25; }
.r2-tile-status { font-size: 0.85rem; color: #0f766e; }
.r2-tile--dev .r2-tile-status { color: #64748b; }
.r2-tile--dev img { filter: saturate(0.35); opacity: 0.85; }
a.r2-tile-inner:hover .r2-tile-name { text-decoration: underline; }
.r2-tiles-nav { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.r2-tiles-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 1.1rem; cursor: pointer; }
.r2-tiles-btn:hover { border-color: #0f172a; }
.r2-tiles-btn:focus-visible { outline: 3px solid #754ffe; outline-offset: 2px; }

/* Wide screens: no scrolling. The intro takes the first slot of a 4-column grid and the seven
   tiles fill the other seven, so two even rows of four show every skill at once. */
@media (min-width: 1200px) {
    .r2-skills-layout { grid-template-columns: minmax(0, 1fr); }
    .r2-skills-intro, .r2-tiles-wrap { grid-area: 1 / 1; }
    .r2-skills-intro { position: relative; z-index: 1; align-self: start; width: calc((100% - 3rem) / 4); aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; }
    .r2-tiles { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
    .r2-tiles > li:first-child { grid-column-start: 2; }
    .r2 .r2-tile-inner img { aspect-ratio: 1; }
    .r2-tiles-nav { display: none; }
}

/* Classes by skill: side-by-side columns of compact rows (Coursera pattern). */
.r2-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; margin-top: 1.25rem; }
.r2-col { background: #eef5f4; border-radius: 0.5rem; padding: 1rem; min-width: 0; display: grid; gap: 0.75rem; }
.r2-col-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.r2 .r2-col-title a { color: #0f172a; text-decoration: none; }
.r2 .r2-col-title a:hover { text-decoration: underline; }
.r2-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.r2-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; align-items: center; background: #fff; border-radius: 0.375rem; padding: 0.6rem; }
.r2-row-thumb { width: 6rem; height: 4rem; object-fit: cover; border-radius: 0.25rem; }
.r2-row-body { display: grid; gap: 0.1rem; min-width: 0; }
.r2 a.r2-row-title { color: #0f172a; font-weight: 600; line-height: 1.3; text-decoration: none; }
.r2 a.r2-row-title:hover { text-decoration: underline; }
.r2-row-meta { font-size: 0.85rem; color: #475569; }
.r2-col-more { font-size: 0.9rem; font-weight: 600; }

/* More than three skills with classes: a row of skill tabs above one panel (Coursera pattern). */
.r2-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 1rem; }
@media (max-width: 767px) { .r2-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; } .r2-tab { flex: none; } }
.r2-tab { border: 1px solid #cbd5e1; background: #fff; color: #0f172a; border-radius: 999px; padding: 0.45rem 1rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.r2-tab:hover { border-color: #0f172a; }
.r2-tab[aria-selected="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.r2-tab:focus-visible { outline: 3px solid #754ffe; outline-offset: 2px; }
.r2-panel .r2-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* Learning paths: each path is a row of steps in order, with its offer underneath. */
.r2-paths-intro { color: #475569; margin: 0 0 1.25rem; }
.r2-paths { display: grid; gap: 1.25rem; }
.r2-path { border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.25rem; background: #fff; display: grid; gap: 1rem; min-width: 0; }
.r2-path-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.r2-path-name { font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 600; margin: 0; }
.r2 .r2-path-name a { color: #0f172a; text-decoration: none; }
.r2 .r2-path-name a:hover { text-decoration: underline; }
.r2-path-note { margin: 0; color: #64748b; font-size: 0.95rem; }
.r2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.25rem; }
.r2-step { position: relative; min-width: 0; }
.r2-step + .r2-step::before { content: "\2192"; position: absolute; left: -0.7rem; top: 2.2rem; transform: translateX(-50%); color: #94a3b8; font-size: 0.9rem; }
.r2 .r2-step a { display: grid; gap: 0.3rem; color: #0f172a; text-decoration: none; }
.r2-step img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.375rem; }
.r2-step-tag { font-size: 0.8rem; font-weight: 600; color: #64748b; }
.r2-step--start .r2-step-tag { color: #0f766e; }
.r2-step-name { font-weight: 600; line-height: 1.3; }
.r2 .r2-step a:hover .r2-step-name { text-decoration: underline; }
.r2-path-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; border-top: 1px solid #f1f5f9; padding-top: 1rem; }
.r2-path-offer { margin: 0; }
.r2-path-offer strong { color: #0f172a; }
.r2-path-offer span { color: #64748b; margin-left: 0.25rem; }
.r2-path-offer--waiting { color: #64748b; }
.r2-path-costs { margin: 0; color: #475569; font-size: 0.9rem; flex: 1 1 18rem; }
.r2-path-foot .r2-btn { margin-left: auto; }
@media (min-width: 992px) { .r2-steps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }

/* Classes: reuse the site's next-sessions list; add the "what you need" line. */
.r2-classes-list { margin-top: 0; }
.r2-class-needs { display: block; font-size: 0.85rem; color: #475569; margin-top: 0.15rem; }
.r2-empty { color: #475569; }

/* Trust: full-width class material with the instructor as a byline. */
.r2-byline { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.5rem; color: #334155; max-width: 52rem; }
.r2-byline-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.r2 a.r2-byline-name { font-weight: 600; }
.r2-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.r2-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.375rem; }

/* AI skills page */
.r2-framework-wrap { max-width: 52rem; }
.r2-framework-toc ol { padding-left: 1.25rem; columns: 2 16rem; margin: 1.5rem 0 2rem; }
.r2-framework-skill { padding-block: 1.5rem; border-top: 1px solid #e2e8f0; scroll-margin-top: 6rem; }
.r2-framework-name { font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 600; margin-bottom: 0.4rem; }
.r2-tier-badge { display: inline-block; margin: 0 0 0.75rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.r2-tier-badge--live { background: #ccfbf1; color: #134e4a; }
.r2-tier-badge--within { background: #ede9fe; color: #4c1d95; }
.r2-tier-badge--dev { background: #f1f5f9; color: #334155; }

@media (prefers-reduced-motion: reduce) { .r2 * { scroll-behavior: auto !important; transition: none !important; } }

/* AI skills page reuses these two from the old skill cards. */
.r2-skill-everyday { color: #334155; margin-bottom: 0.6rem; }
.r2-skill-next { margin: 0; font-size: 0.9rem; color: #475569; }
.r2 [id] { scroll-margin-top: 8rem; }