/* Resource library: real document covers and product films, in Hatmed's existing palette. */
.hr-hero { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(32px,5vw,80px); padding-block: 22px 60px; }
.hr-intro h1 { margin: 0 0 24px; }
.hr-intro > p:not(.hd-eyebrow) { max-width: 500px; margin: 0 0 28px; }
.hr-feature { display: grid; grid-template-columns: 1fr 42%; gap: 26px; align-items: center; min-height: 310px; padding: 34px 32px 0; border-radius: 14px; background: var(--hd-deep); overflow: hidden; text-decoration: none; }
.hd-main .hr-feature h2 { color: #fff; font-size: clamp(23px,2.3vw,32px); }
.hr-feature-copy { align-self: center; padding-bottom: 34px; }
.hr-feature-label { display: block; margin-bottom: 16px; color: #9ed5d7; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.hd-main .hr-feature p { color: #c7d9dc; font-size: 12px; }
.hr-feature-link { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; color: #fff; font-size: 12px; font-weight: 600; }
.hr-feature > img { display: block; align-self: end; width: 100%; height: auto; transform: rotate(6deg) translateY(26px); box-shadow: 0 10px 30px #0004; border-radius: 2px; }
.hr-feature:hover { background: #194f59; }
.hr-library { padding-block: 32px 72px; scroll-margin-top: 114px; border-top: 1px solid var(--hd-line); }
.hr-library-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 26px; }
.hr-library-heading p { margin: 0; font-size: 14px; }
.hr-filters { border: 1px solid var(--hd-line); border-radius: 12px; padding: 20px 24px 24px; background: var(--hd-fog); }
.hr-type-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hr-type-filters button { font: 500 13px/1.4 Inter,sans-serif; padding: 11px 18px; border: 1px solid transparent; border-radius: 24px; background: transparent; color: var(--hd-muted); cursor: pointer; min-height: 44px; }
.hr-type-filters button[aria-pressed="true"] { color: #fff; background: var(--hd-teal); }
.hr-type-filters button:not([aria-pressed="true"]):hover { border-color: #b8cece; color: var(--hd-ink); }
.hr-fields { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
.hr-fields label { display: grid; gap: 8px; font: 500 12px/1.4 Inter,sans-serif; }
.hr-fields :is(input,select) { display: block; box-sizing: border-box; width: 100%; height: 49px; padding: 12px 16px; border: 1px solid #c2d1d1; border-radius: 6px; background: #fff; color: var(--hd-ink); font: 400 14px/1.5 Inter,sans-serif; }
.hr-fields input::placeholder { color: #6b7c80; opacity: 1; }
.hr-page :is(a,button,input,select):focus-visible { outline: 3px solid #007a8a; outline-offset: 4px; }
.hr-results-bar { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hr-results-bar p { font-size: 12px; margin: 0; }
.hr-clear { border: 0; background: transparent; font: 500 12px Inter,sans-serif; color: var(--hd-teal); cursor: pointer; min-height: 44px; }
.hr-clear span { margin-left: 8px; font-size: 20px; }
.hr-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.hr-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--hd-line); border-radius: 10px; background: #fff; overflow: hidden; }
.hr-card-media { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; height: 250px; padding: 26px 28px 0; border: 0; border-bottom: 1px solid var(--hd-line); background: #edf2f1; overflow: hidden; cursor: pointer; }
.hr-card-media img { display: block; width: auto; height: 100%; object-fit: contain; box-shadow: 0 4px 18px #153d4420; }
.hr-format { position: absolute; top: 16px; left: 16px; padding: 6px 9px; color: var(--hd-teal); background: #fff; border-radius: 4px; font: 600 10px/1.3 Inter,sans-serif; letter-spacing: .06em; }
.hr-preview-label { position: absolute; bottom: 12px; right: 12px; background: #fff; padding: 8px 12px; border-radius: 4px; color: var(--hd-teal); font-size: 10px; box-shadow: 0 2px 10px #153d4410; }
.hr-card-copy { display: flex; flex-direction: column; flex: 1; padding: 23px 24px 18px; }
.hr-card-copy p.hr-card-type { font: 600 10px/1.5 Inter,sans-serif; color: var(--hd-aqua); margin: 0 0 10px; }
.hr-card-type span { color: var(--hd-muted); font-weight: 400; }
.hd-main .hr-card h3 { font-size: 19px; line-height: 1.4; }
.hr-card-copy p.hr-description { font-size: 13px; line-height: 1.7; margin: 13px 0 16px; }
.hr-card-copy p.hr-edition { margin: auto 0 20px; padding-top: 5px; font-size: 11px; color: #6b7b7e; }
.hr-card-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--hd-line); padding-top: 12px; }
.hr-card-bottom > span { font-size: 10px; color: var(--hd-muted); }
.hr-card-action { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0; border: 0; background: transparent; color: var(--hd-teal); font: 600 11px/1.4 Inter,sans-serif; text-decoration: none; cursor: pointer; }
.hr-card-action span { font-size: 18px; }
.hr-card-action:hover { text-decoration: underline; }
.hr-card-media--video { padding: 0; background: #f6f8f8; }
.hr-card-media--video img { width: 100%; height: 100%; object-fit: contain; box-shadow: none; }
.hr-play { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; padding-left: 3px; border: 1px solid #ffffffb0; border-radius: 50%; background: #225561e8; color: #fff; font-size: 19px; box-shadow: 0 4px 20px #153d441f; }
.hr-duration { position: absolute; right: 14px; bottom: 14px; padding: 5px 8px; border-radius: 4px; background: #153d44; color: #fff; font-size: 11px; }
.hr-empty { padding: 50px 24px; border: 1px dashed #bccfce; border-radius: 10px; text-align: center; }
.hr-support { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; padding: 40px; margin-bottom: 70px; background: var(--hd-fog); border-radius: 12px; }
.hr-support p:not(.hd-eyebrow) { max-width: 680px; font-size: 14px; margin-bottom: 0; }
.hr-support > div:last-child { display: grid; gap: 20px; justify-items: start; }
.hr-video-open { overflow: hidden; }
.hr-video-dialog { width: min(1000px,calc(100% - 40px)); max-height: calc(100dvh - 40px); padding: 24px; border: 0; border-radius: 14px; background: #fff; color: var(--hd-ink); box-shadow: 0 20px 100px #0005; }
.hr-video-dialog::backdrop { background: #102e35c9; }
.hr-video-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 20px; }
.hd-main .hr-video-dialog h2 { font-size: 25px; }
.hr-video-heading .hd-eyebrow { margin-bottom: 6px; }
.hr-video-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--hd-line); border-radius: 50%; background: #fff; color: var(--hd-ink); font-size: 27px; cursor: pointer; }
.hr-video-dialog video { display: block; width: 100%; max-height: 62dvh; aspect-ratio: 16 / 9; object-fit: contain; background: #f5f7f7; }
.hr-video-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; }
.hr-video-footer p { font-size: 12px; margin: 0; }
@media (max-width: 1100px) { .hr-hero { grid-template-columns: 1fr 1fr; gap: 28px; } .hr-feature { padding: 26px 24px 0; gap: 16px; min-height: 280px; } .hr-grid { gap: 18px; } .hr-card-copy { padding: 20px 18px 16px; } .hr-support { gap: 32px; } }
@media (max-width: 850px) { .hr-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hr-hero { grid-template-columns: 1fr; } .hr-feature { min-height: 280px; max-height: 320px; grid-template-columns: 1fr 180px; padding: 30px 40px 0; } .hr-feature > img { max-height: 310px; object-fit: contain; } .hr-library-heading { display: block; } .hr-library-heading p { margin-top: 10px; } .hr-support { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .hr-hero { padding-block: 12px 40px; gap: 30px; } .hr-intro > p:not(.hd-eyebrow) { font-size: 15px; } .hr-intro br { display: none; } .hr-feature { padding: 24px 20px 0; grid-template-columns: 1fr 110px; gap: 14px; min-height: 240px; } .hd-main .hr-feature h2 { font-size: 23px; } .hr-feature-link { padding-top: 14px; } .hr-feature-copy { padding-bottom: 24px; } .hr-fields { grid-template-columns: 1fr; gap: 14px; } .hr-filters { padding: 14px 16px 18px; } .hr-type-filters { gap: 4px; margin-bottom: 18px; } .hr-type-filters button { font-size: 12px; padding: 10px 13px; } .hr-grid { grid-template-columns: 1fr; gap: 24px; } .hr-card-media { height: 235px; } .hr-card-copy { padding: 22px; } .hr-support { padding: 28px 24px; margin-bottom: 44px; } .hr-library { padding-bottom: 44px; } .hr-video-dialog { padding: 16px; width: calc(100% - 24px); } .hd-main .hr-video-dialog h2 { font-size: 20px; } .hr-video-footer { align-items: start; flex-direction: column; gap: 12px; } }

.hr-youtube-frame { display:block; width:100%; aspect-ratio:16/9; border:0; background:#102e35; }
.hr-video-dialog .hr-youtube-frame { max-height:62dvh; }
.hd-channel-video { max-width:960px; margin:24px 0; }
.hd-channel-video>p { max-width:780px; }
.hd-channel-screen { position:relative; aspect-ratio:16/9; background:#102e35; overflow:hidden; border-radius:12px; margin:20px 0 16px; }
.hd-channel-screen button { position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:#102e35; color:white; cursor:pointer; }
.hd-channel-screen button img { width:100%; height:100%; object-fit:contain; }
.hd-channel-screen button>span { position:absolute; bottom:20px; left:20px; padding:12px 18px; background:#153d44; border:1px solid #ffffff88; border-radius:6px; font-weight:600; }
.hd-channel-screen button:focus-visible { outline:3px solid #65cdd4; outline-offset:-4px; }
.hd-channel-video .hd-channel-credit { font-size:12px; color:#52676c; }