/* Shared session library, detail and media styles. */
/* Keep the Know Your Halal breadcrumbs below the overlaid site header. */
.session-hero { padding: 212px 0 36px; background: #2e3192 url("/img/page-banner/about-page-banner.jpg") no-repeat bottom center / cover; color: #fff; }
.session-eyebrow { color: #e1e4fa; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; }
.session-hero h1 { color: #fff; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.15; font-weight: 700; letter-spacing: -.035em; margin: 0 0 20px; }
.session-hero-description { color: #edf0fc; max-width: 670px; font-size: 17px; line-height: 1.8; margin: 0; }
.session-hero--detail h1 { max-width: 1000px; font-size: clamp(28px, 3.7vw, 44px); line-height: 1.3; }
.session-library, .event-detail-page { background: #f6f7fb; padding: 28px 0 44px; }
.session-introduction { margin-top: 28px; color: #596174; border-top: 1px solid #dfe2ee; padding-top: 18px; }
.session-introduction summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: #2e3192; font-weight: 600; font-size: 14px; }
.session-introduction summary:focus-visible { outline: 3px solid #6064c4; outline-offset: 4px; }
.session-introduction > div { padding-top: 12px; font-size: 15px; line-height: 1.8; }
.session-introduction :is(h1, h2, h3, h4, h5, h6) { font-size: 18px; line-height: 1.6; text-align: left !important; }
.session-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.session-library-heading h2 { color: #2e3192; font-size: 25px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 8px; }
.session-library-heading p:last-child { color: #616778; margin: 0; font-size: 15px; }
.session-count { flex-shrink: 0; color: #616778; font-size: 13px; }
.session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.session-card { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; border: 1px solid #dfe2ee; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px #2e319204; transition: border-color .2s, box-shadow .2s; }
.session-card:hover { border-color: #b2b6dc; box-shadow: 0 8px 26px #2e31920c; }
.session-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: #616778; font-size: 13px; flex-wrap: wrap; }
.session-format { margin-left: auto; background: #f0f2f8; padding: 5px 9px; border-radius: 6px; font-size: 11px; color: #5c6280; }
.session-card h3 { font-size: 18px; font-weight: 600; line-height: 1.45; margin: 0 0 8px; letter-spacing: -.02em; }
.session-card h3 a { color: #2e3192; text-decoration: none; }
.session-card h3 a:hover { color: #242673; text-decoration: underline; text-underline-offset: 4px; }
.session-presenter { display: flex; align-items: baseline; gap: 9px; color: #616778; font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.session-card-actions, .event-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.session-card-actions { margin-top: auto; padding-top: 0; }
.session-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 16px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background .2s; }
.session-button--primary { color: #fff; background: #2e3192; border-color: #2e3192; }
.session-button--primary:hover { color: #fff; background: #242673; border-color: #242673; }
.session-button--secondary { color: #2e3192; border-color: #d5d9ee; background: #fff; }
.session-button--secondary:hover { color: #242673; background: #eef0fa; }
.session-details-link { display: inline-flex; align-items: center; gap: 10px; align-self: center; min-height: 44px; margin-left: auto; color: #616778; font-size: 13px; text-decoration: none; }
.session-details-link:hover { color: #2e3192; text-decoration: underline; }
.session-unavailable { font-size: 13px; color: #616778; padding-block: 12px; }
.session-back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #2e3192; margin: -12px 0 18px; font-size: 14px; font-weight: 600; }
.session-library a:focus-visible, .event-detail-page a:focus-visible, .session-hero a:focus-visible { outline: 3px solid #6064c4; outline-offset: 4px; }
.session-empty { text-align: center; padding: 50px 24px; background: #fff; border: 1px solid #dfe2ee; border-radius: 18px; }
.session-empty > i { font-size: 32px; color: #2e3192; margin-bottom: 20px; }
.session-empty h2 { font-size: 24px; color: #2e3192; }
.event-summary-card { display: flex; align-items: center; gap: 30px; padding: 30px; border: 1px solid #dfe2ee; border-radius: 18px; background: #fff; }
.event-detail-summary { flex: 1; min-width: 0; }
.event-detail-kicker { font-size: 12px; color: #2e3192; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 22px; }
.event-detail-list { display: flex; flex-wrap: wrap; gap: 20px 36px; margin: 0; }
.event-detail-list > div { flex: 1 1 165px; }
.event-detail-list dt { font-size: 12px; color: #616778; font-weight: 500; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.event-detail-list dd { color: #30364e; font-size: 15px; font-weight: 600; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.event-detail-actions { margin-top: 24px; }
.event-detail-poster { width: 130px; flex-shrink: 0; text-align: center; font-size: 11px; color: #616778; }
.event-detail-poster img { width: 100%; max-height: 150px; object-fit: contain; border-radius: 8px; background: #f0f2f8; }
.event-detail-poster span { display: block; margin-top: 8px; }
.event-detail-poster[hidden] { display: none; }
.session-resource-notice { display: flex; gap: 8px; align-items: baseline; font-size: 14px; margin: 22px 0 0; color: #616778; }
.event-content-card, .event-gallery-card { margin-top: 28px; padding: 30px; border: 1px solid #dfe2ee; border-radius: 18px; background: #fff; }
.event-section-title { font-size: 22px; font-weight: 700; margin: 0 0 20px; color: #2e3192; }
.event-content-body { color: #596174; line-height: 1.8; overflow-wrap: anywhere; }
.event-content-body img, .event-content-body iframe { max-width: 100%; }
.event-content-body p:last-child { margin-bottom: 0; }
.event-gallery-card img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; }
.session-more { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #dfe2ee; margin-top: 40px; padding-top: 30px; }
.session-more h2 { font-size: 22px; font-weight: 700; color: #2e3192; margin: 0 0 8px; }
.session-more p { color: #616778; font-size: 14px; margin: 0; }
.session-more > a { flex-shrink: 0; }
.event-resources { margin-top: 36px; scroll-margin-top: 115px; }
.event-resources-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 0 22px; }
.event-resource-eyebrow { color: #2e3192; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.event-resources-heading h2 { color: #2e3192; font-size: clamp(25px, 3vw, 34px); font-weight: 700; margin: 0 0 8px; }
.event-resources-heading p:last-child { color: #616778; margin: 0; }
.event-resource-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: #eef0fa; color: #2e3192; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.event-resource-card { overflow: hidden; margin-bottom: 26px; background: #fff; border: 1px solid #dfe2ee; border-radius: 22px; box-shadow: 0 12px 36px rgba(46, 49, 146, .07); scroll-margin-top: 100px; }
.event-resource-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; }
.event-resource-name { display: flex; align-items: center; gap: 15px; min-width: 0; }
.event-resource-icon { display: inline-flex; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; align-items: center; justify-content: center; color: #2e3192; background: #eef0fa; }
.event-resource-icon--purple { background: #efeffa; color: #4545a3; }
.event-resource-name h3 { font-size: 20px; font-weight: 700; color: #2e3192; margin: 0 0 4px; }
.event-resource-name p { color: #616778; font-size: 13px; margin: 0; }
.event-resource-bar > a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #d5d9ee; border-radius: 10px; padding: 10px 15px; color: #2e3192; font-size: 13px; font-weight: 600; }
.event-resource-bar > a:hover { background: #eef0fa; }
.event-resource-card a:focus-visible { outline: 3px solid #4545a3; outline-offset: 4px; }
.event-video-stage { background: radial-gradient(ellipse at top, #252746, #10111c); }
.event-video-stage video { display: block; width: 100%; max-height: 75vh; aspect-ratio: 16 / 9; }
.event-document-stage { position: relative; aspect-ratio: 16 / 10; background: #eef1f5; border-block: 1px solid #e5e9ed; }
.event-document-stage--pdf { aspect-ratio: auto; height: min(78vh, 850px); min-height: 420px; }
.event-document-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.event-resource-help { padding: 15px 28px; margin: 0; color: #616778; font-size: 12px; line-height: 1.7; background: #fafbfe; }
.event-resource-help a { color: #2e3192; text-decoration: underline; }
@media (max-width: 600px) {
    .session-hero { padding: 172px 0 32px; }
    .session-hero-description { font-size: 15px; }
    .session-library, .event-detail-page { padding: 28px 0 42px; }
    .session-library-heading { align-items: flex-start; gap: 16px; }
    .session-library-heading h2 { font-size: 25px; }
    .session-count { font-size: 11px; margin-top: 5px; }
    .session-grid { grid-template-columns: 1fr; gap: 16px; }
    .session-card { padding: 16px; }
    .session-card h3 { font-size: 17px; }
    .session-card-top { gap: 8px; font-size: 12px; }
    .session-format { font-size: 10px; }
    .session-button { padding: 10px 13px; }
    .event-summary-card { align-items: flex-start; padding: 22px; flex-direction: column; }
    .event-detail-list { gap: 18px; }
    .event-detail-list > div { flex-basis: 100%; }
    .event-detail-poster { width: 95px; }
    .event-content-card, .event-gallery-card { padding: 22px; }
    .session-more { align-items: flex-start; flex-direction: column; }
    .event-resources { margin-top: 30px; }
    .event-resource-tag { display: none; }
    .event-resource-card { border-radius: 16px; }
    .event-resource-bar { align-items: flex-start; flex-direction: column; padding: 20px; gap: 15px; }
    .event-resource-name h3 { font-size: 18px; }
    .event-resource-help { padding: 14px 20px; }
    .event-document-stage { aspect-ratio: 4 / 3; min-height: 300px; }
    .event-document-stage--pdf { height: 65vh; min-height: 400px; }
}
@media (min-width: 601px) and (max-width: 991px) {
    .session-hero { padding-top: 190px; }
    .session-format { margin-left: 0; }
    .event-summary-card { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .session-card, .session-button { transition: none; }
}