/* YouCube Mechanics / Page 2. Scoped independently: no Page 1 or theme navbar changes. */
#local-youcubehome-mechanics.ychm-root {
    --ychm-navy: #182542;
    --ychm-muted: #66758b;
    --ychm-line: #e2e7ef;
    --ychm-tint: #e7f4f7;
    --ychm-accent: #237d90;
    --ychm-on-tint: #237d90;
    --ychm-u: 1px;
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0 auto;
    padding: 0 0 50px;
    color: var(--ychm-navy);
    background: #f5f7fb;
    font-family: Heebo, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: start;
    isolation: isolate;
}
#local-youcubehome-mechanics *,
#local-youcubehome-mechanics *::before,
#local-youcubehome-mechanics *::after { box-sizing: border-box; }
#local-youcubehome-mechanics [hidden] { display: none !important; }
#local-youcubehome-mechanics a { text-decoration: none; }
#local-youcubehome-mechanics button,
#local-youcubehome-mechanics input { font-family: inherit; }
#local-youcubehome-mechanics .ychm-shell {
    display: grid;
    grid-template-columns: calc(218 * var(--ychm-u)) minmax(0, 1fr);
    width: 100%;
    max-width: calc(1500 * var(--ychm-u));
    margin-inline: auto;
}
#local-youcubehome-mechanics .ychm-sidebar {
    padding: calc(44 * var(--ychm-u)) calc(23 * var(--ychm-u));
    border-inline-end: 1px solid var(--ychm-line);
    min-width: 0;
}
#local-youcubehome-mechanics .ychm-nav-caption {
    margin: 0 0 20px;
    padding-inline: 13px;
    color: var(--ychm-muted);
    font-size: calc(12 * var(--ychm-u));
}
#local-youcubehome-mechanics .ychm-navigation { display: flex; flex-direction: column; gap: 8px; }
#local-youcubehome-mechanics .ychm-nav-link {
    display: flex; align-items: center; gap: 12px;
    min-height: calc(48 * var(--ychm-u));
    padding: 12px 13px;
    border: 0; border-radius: 10px;
    background: transparent;
    color: #67758b;
    font-size: calc(15 * var(--ychm-u));
    font-weight: 500;
    overflow-wrap: anywhere;
}
#local-youcubehome-mechanics .ychm-nav-link img { flex: 0 0 20px; width: 20px; height: 20px; border: 0; margin: 0; }
#local-youcubehome-mechanics .ychm-nav-link:hover { background: #eaf0f6; }
#local-youcubehome-mechanics .ychm-nav-link.ychm-current { background: var(--ychm-navy); color: #fff; }
#local-youcubehome-mechanics .ychm-current img { filter: brightness(0) invert(1); }
#local-youcubehome-mechanics .ychm-side-note { margin-top: 80px; padding: 28px 12px; border-top: 1px solid var(--ychm-line); font-size: 13px; line-height: 1.8; color: var(--ychm-muted); }
#local-youcubehome-mechanics .ychm-mini-cube { color: var(--ychm-accent); font-size: 32px; line-height: 42px; margin-bottom: 9px; }
#local-youcubehome-mechanics .ychm-side-note strong { color: var(--ychm-navy); display: block; font-size: 14px; }
#local-youcubehome-mechanics .ychm-side-note p { margin: 5px 0 0; font-size: 13px; }
#local-youcubehome-mechanics .ychm-main { min-width: 0; padding: calc(34 * var(--ychm-u)) calc(52 * var(--ychm-u)) 0; }
#local-youcubehome-mechanics .ychm-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
#local-youcubehome-mechanics .ychm-breadcrumb { display: flex; align-items: center; gap: 13px; color: var(--ychm-navy); font-size: 14px; }
#local-youcubehome-mechanics .ychm-breadcrumb a { color: var(--ychm-muted); }
#local-youcubehome-mechanics .ychm-crumb-separator { color: #8795a8; font-size: 23px; line-height: 1; }
#local-youcubehome-mechanics[dir="ltr"] .ychm-crumb-separator { transform: rotate(180deg); }
#local-youcubehome-mechanics .ychm-admin-link { color: var(--ychm-accent); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
#local-youcubehome-mechanics .ychm-heading { display: flex; align-items: center; gap: 20px; padding: 2px 0 28px; margin: 0 0 23px; border-bottom: 1px solid var(--ychm-line); }
#local-youcubehome-mechanics .ychm-heading-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; background: var(--ychm-tint); }
#local-youcubehome-mechanics .ychm-heading-icon img { width: 36px; height: 36px; }
#local-youcubehome-mechanics h1 { color: var(--ychm-navy); font-size: calc(44 * var(--ychm-u)); line-height: 1.2; font-weight: 750; margin: 0 0 7px; padding: 0; }
#local-youcubehome-mechanics .ychm-heading p { color: var(--ychm-muted); font-size: 17px; line-height: 1.5; margin: 0; }
#local-youcubehome-mechanics .ychm-admin-note { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: #edf2f8; padding: 10px 14px; margin: 0 0 19px; border-radius: 8px; color: #53627a; font-size: 13px; }
#local-youcubehome-mechanics .ychm-admin-note a { color: var(--ychm-accent); text-decoration: underline; }
#local-youcubehome-mechanics .ychm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 19px; }
#local-youcubehome-mechanics .ychm-count { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ychm-muted); }
#local-youcubehome-mechanics .ychm-count svg { margin-inline-end: 2px; color: var(--ychm-accent); }
#local-youcubehome-mechanics .ychm-count b { font-size: 19px; color: var(--ychm-navy); }
#local-youcubehome-mechanics .ychm-tools { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
#local-youcubehome-mechanics .ychm-motion { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--ychm-line); border-radius: 10px; color: #586a80; background: #fff; font-size: 13px; line-height: 20px; box-shadow: none; cursor: pointer; }
#local-youcubehome-mechanics .ychm-play-icon { display: none; }
#local-youcubehome-mechanics[data-paused="true"] .ychm-play-icon { display: block; }
#local-youcubehome-mechanics[data-paused="true"] .ychm-pause-icon { display: none; }
#local-youcubehome-mechanics .ychm-search { position: relative; width: 248px; max-width: 100%; }
#local-youcubehome-mechanics .ychm-search input { display: block; width: 100%; height: 42px; padding: 9px 12px; padding-inline-end: 39px; border: 1px solid #d9e1ec; border-radius: 10px; outline: none; background: #fff; color: var(--ychm-navy); font-size: 14px; line-height: 22px; margin: 0; box-shadow: none; }
#local-youcubehome-mechanics .ychm-search input::placeholder { color: #718199; opacity: 1; }
#local-youcubehome-mechanics .ychm-search svg { position: absolute; inset-inline-end: 12px; top: 11px; color: #6e829b; pointer-events: none; }
#local-youcubehome-mechanics .ychm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(22 * var(--ychm-u)); align-items: stretch; }
#local-youcubehome-mechanics .ychm-course-card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 1px solid #dce6ee; border-radius: 15px; overflow: hidden; background: #fff; box-shadow: 0 3px 12px #18254204; transition: border-color .18s ease, box-shadow .18s ease; }
#local-youcubehome-mechanics .ychm-course-card:hover,
#local-youcubehome-mechanics .ychm-course-card:focus-within { border-color: #9dc7d3; box-shadow: 0 6px 21px #24466612; }
#local-youcubehome-mechanics .ychm-media { position: relative; background: var(--ychm-tint); }
#local-youcubehome-mechanics .ychm-visual { --ychm-visual-height: calc(145 * var(--ychm-u)); position: relative; display: flex; align-items: center; justify-content: center; height: calc(202 * var(--ychm-u)); padding: 27px 17px 16px; overflow: hidden; }
#local-youcubehome-mechanics .ychm-card-number { position: absolute; top: 11px; inset-inline-start: 15px; color: var(--ychm-on-tint); font-size: 12px; line-height: 16px; letter-spacing: .08em; z-index: 1; }
#local-youcubehome-mechanics .ychm-animation-window { position: relative; flex: 0 1 auto; width: min(100%, calc(var(--ychm-visual-height) * var(--ychm-visual-ratio))); max-width: 100%; overflow: hidden; mix-blend-mode: multiply; }
#local-youcubehome-mechanics img.ychm-animation { position: absolute; display: block; max-width: none; min-width: 0; height: auto; margin: 0; border: 0; border-radius: 0; padding: 0; pointer-events: none; user-select: none; }
#local-youcubehome-mechanics .ychm-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; opacity: 0; pointer-events: none; background: #182b456b; transition: opacity .18s ease; }
#local-youcubehome-mechanics .ychm-course-card:hover .ychm-actions,
#local-youcubehome-mechanics .ychm-course-card:focus-within .ychm-actions { opacity: 1; pointer-events: auto; }
#local-youcubehome-mechanics .ychm-action { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; min-height: 46px; margin: 0; padding: 11px 12px; border: 1px solid #fff; border-radius: 10px; font-size: 15px; line-height: 22px; font-weight: 650; text-decoration: none; box-shadow: none; white-space: nowrap; cursor: pointer; }
#local-youcubehome-mechanics .ychm-action-course { background: #fff; color: var(--ychm-navy); }
#local-youcubehome-mechanics .ychm-action-album { background: #18314866; color: #fff; }
#local-youcubehome-mechanics a.ychm-action-course:hover { background: #f2f8fa; color: var(--ychm-navy); }
#local-youcubehome-mechanics a.ychm-action-album:hover { background: #183148b3; color: #fff; }
#local-youcubehome-mechanics .ychm-course-body { flex: 1; display: flex; align-items: center; min-height: calc(98 * var(--ychm-u)); padding: 19px 19px 20px; background: #fff; border-top: 1px solid #e6edf2; }
#local-youcubehome-mechanics .ychm-course-body h2 { font-size: calc(19 * var(--ychm-u)); line-height: 1.6; font-weight: 700; margin: 0; padding: 0; color: var(--ychm-navy); overflow-wrap: anywhere; }
#local-youcubehome-mechanics .ychm-empty { border: 1px solid var(--ychm-line); border-radius: 13px; padding: 38px 24px; text-align: center; background: #fff; color: var(--ychm-muted); }
#local-youcubehome-mechanics .ychm-reset { border: 1px solid var(--ychm-line); border-radius: 8px; padding: 10px 18px; background: var(--ychm-tint); color: var(--ychm-accent); cursor: pointer; }
#local-youcubehome-mechanics a:focus-visible,
#local-youcubehome-mechanics button:focus-visible,
#local-youcubehome-mechanics input:focus-visible { outline: 3px solid #226fac; outline-offset: 3px; }
#local-youcubehome-mechanics .ychm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
/* Ancestors are marked only after safety checks; header/menus are never marked. */
body.local-youcubehome-catalogue .ychm-layout-path { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; border-inline: 0 !important; background: #f5f7fb !important; box-shadow: none !important; overflow: visible !important; }
body.local-youcubehome-catalogue.ychm-fullwidth #local-youcubehome-mechanics { left: var(--ychm-page-offset, 0px); right: auto; width: var(--ychm-page-width, 100%); min-height: var(--ychm-page-minheight, 70vh); }
/* Only Moodle's duplicated content heading is hidden, never the entire site header. */
body.local-youcubehome-catalogue #page-header .page-header-headings { display: none; }
@media (min-width: 1101px) {
    body.ychm-fullwidth #local-youcubehome-mechanics { --ychm-u: max(1px, calc(var(--ychm-page-width, 100vw) / 1900)); }
}
@media (max-width: 1200px) {
    #local-youcubehome-mechanics .ychm-shell { grid-template-columns: 185px minmax(0, 1fr); }
    #local-youcubehome-mechanics .ychm-sidebar { padding-inline: 13px; }
    #local-youcubehome-mechanics .ychm-main { padding-inline: 28px; }
    #local-youcubehome-mechanics .ychm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    #local-youcubehome-mechanics .ychm-shell { display: block; }
    #local-youcubehome-mechanics .ychm-sidebar { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--ychm-line); }
    #local-youcubehome-mechanics .ychm-nav-caption,
    #local-youcubehome-mechanics .ychm-side-note { display: none; }
    #local-youcubehome-mechanics .ychm-navigation { flex-direction: row; gap: 7px; overflow-x: auto; }
    #local-youcubehome-mechanics .ychm-nav-link { flex: 0 0 auto; min-height: 42px; padding: 9px 11px; gap: 7px; font-size: 13px; white-space: nowrap; }
    #local-youcubehome-mechanics .ychm-main { padding: 22px 18px 0; }
    #local-youcubehome-mechanics .ychm-topline { margin-bottom: 22px; }
    #local-youcubehome-mechanics .ychm-heading { gap: 15px; padding-bottom: 23px; }
    #local-youcubehome-mechanics h1 { font-size: 36px; }
    #local-youcubehome-mechanics .ychm-heading-icon { width: 63px; height: 63px; flex-basis: 63px; }
    #local-youcubehome-mechanics .ychm-heading p { font-size: 15px; }
    #local-youcubehome-mechanics .ychm-grid { gap: 16px; }
    #local-youcubehome-mechanics .ychm-tools { flex: 1 0 100%; justify-content: space-between; }
    #local-youcubehome-mechanics .ychm-search { flex: 1; min-width: 160px; }
    #local-youcubehome-mechanics .ychm-course-body h2 { font-size: 18px; }
}
@media (max-width: 540px) {
    #local-youcubehome-mechanics .ychm-grid { grid-template-columns: minmax(0, 1fr); }
    #local-youcubehome-mechanics .ychm-visual { --ychm-visual-height: 150px; height: 206px; }
    #local-youcubehome-mechanics .ychm-course-body { min-height: 82px; padding: 16px 19px; }
    #local-youcubehome-mechanics .ychm-motion { padding-inline: 9px; font-size: 12px; }
}
/* Explicit card width (0/default leaves the original responsive layout unchanged).
 * Keep empty grid tracks during search so a single result never grows to page width.
 * Cap at available space on phones; picture height follows its new card width. */
/* A custom card width must use the available page width, not the 1500-unit
 * shell inherited from the three-column homepage. Keep the automatic layout
 * untouched. Auto-fill can now create four or more columns when they fit. */
#local-youcubehome-mechanics.ychm-custom-size .ychm-shell {
    max-width: none;
}
@media (min-width: 1201px) {
    #local-youcubehome-mechanics.ychm-custom-size .ychm-main {
        padding-inline: calc(24 * var(--ychm-u));
    }
}
#local-youcubehome-mechanics.ychm-custom-size .ychm-grid {
    grid-template-columns: repeat(auto-fill, min(100%, var(--ychm-card-width)));
    justify-content: start;
}
#local-youcubehome-mechanics.ychm-custom-size .ychm-visual {
    height: auto;
    aspect-ratio: 378 / 202;
}
#local-youcubehome-mechanics.ychm-custom-size .ychm-animation-window {
    width: min(100%, calc(100% * .4 * var(--ychm-visual-ratio)));
}
/* Touch devices need no hover gesture, including touch-enabled desktop devices. */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
    #local-youcubehome-mechanics .ychm-actions { position: static; opacity: 1; pointer-events: auto; background: transparent; padding: 0 16px 17px; }
    #local-youcubehome-mechanics .ychm-action { flex: 1; min-width: 0; border-color: #b9d4dc; }
    #local-youcubehome-mechanics .ychm-action-album { background: #fff; color: var(--ychm-accent); }
    #local-youcubehome-mechanics a.ychm-action-album:hover { background: #f2f8fa; color: var(--ychm-accent); }
}
@media (any-hover: none) {
    #local-youcubehome-mechanics .ychm-motion { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #local-youcubehome-mechanics *, #local-youcubehome-mechanics *::before { transition: none !important; }
}
@media print {
    #local-youcubehome-mechanics { left: 0 !important; width: 100% !important; background: #fff; }
    #local-youcubehome-mechanics .ychm-shell { display: block; }
    #local-youcubehome-mechanics .ychm-sidebar,
    #local-youcubehome-mechanics .ychm-tools,
    #local-youcubehome-mechanics .ychm-admin-note,
    #local-youcubehome-mechanics .ychm-admin-link { display: none; }
    #local-youcubehome-mechanics .ychm-actions { position: static; opacity: 1; background: transparent; }
    #local-youcubehome-mechanics .ychm-action { border-color: #dce6ee; background: #fff; color: #182542; }
    #local-youcubehome-mechanics .ychm-course-card { break-inside: avoid; }
}

#local-youcubehome-mechanics .ychm-course-range { display: inline-block; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
#local-youcubehome-mechanics .ychm-nav-home img { filter: brightness(0); opacity: .5; }