.tc-page { margin-top: 10px; font-family:Scada, sans-serif; }
.tc-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.tc-heading h2 { margin-bottom:4px; }
.tc-count { font-size:13px; opacity:.7; }
.tc-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.tc-card { display:block; text-decoration:none; min-width:0; }
.tc-card img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; }
.tc-card span { display:block; margin-top:6px; font-size:13px; line-height:1.25; white-space:normal; }
.tc-collection-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.tc-collection-link { display:flex; flex-direction:column; padding:12px; border:1px solid rgba(128,128,128,.25); border-radius:8px; text-decoration:none; }
.tc-collection-link span { margin-top:4px; opacity:.8; }
.tc-collection-link small { margin-top:8px; opacity:.65; }
.tc-portal-panel { margin-bottom:0; }
.tc-portal-scroll {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 0 8px;
    margin:0 0 4px;
    scrollbar-width:auto;
}
.tc-portal-strip {
    display:flex;
    gap:3px;
    width:max-content;
    min-width:100%;
    padding:0;
    margin:0;
    list-style:none;
    white-space:nowrap;
}
.tc-portal-strip li {
    flex:0 0 auto;
    margin:0;
    padding:0;
    list-style:none;
    filter:alpha(Opacity=88);
    opacity:.88;
    transition:opacity .18s ease;
}
.tc-portal-strip li:hover {
    filter:alpha(Opacity=100);
    opacity:1;
}
.tc-portal-strip a[data-tooltip] {
    position:relative;
    display:block;
    height:110px;
    font-size:11px;
}
/* The global CSS tooltip is disabled only here because the horizontal
   scroll container clips pseudo-elements. JS renders it on document.body. */
.tc-portal-strip a[data-tooltip]::before,
.tc-portal-strip a[data-tooltip]::after { display:none !important; }
.tc-portal-strip img {
    width:110px;
    height:110px;
    object-fit:cover;
    border-radius:8px;
    display:block;
}
.tc-portal-footer {
    text-align:center;
    font-family:Scada, sans-serif;
    font-size:13px;
    padding:1px 0 2px;
}
.tc-floating-tooltip {
    position:fixed;
    z-index:10000;
    max-width:min(360px, calc(100vw - 16px));
    padding:6px 9px;
    border-radius:4px;
    background:#333;
    color:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    font-family:Helvetica, Arial, sans-serif;
    font-size:11px;
    line-height:1.2;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(-.5em);
    transition:opacity 300ms ease-out, transform 300ms ease-out, visibility 0s linear 300ms;
}
.tc-floating-tooltip--below:not(.is-visible) { transform:translateY(.5em); }
.tc-floating-tooltip::after {
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    margin-left:-5px;
    border:5px solid transparent;
    border-top-color:#333;
}
.tc-floating-tooltip--below::after {
    top:auto;
    bottom:100%;
    border-top-color:transparent;
    border-bottom-color:#333;
}
.tc-floating-tooltip.is-visible {
    opacity:.9;
    visibility:visible;
    transform:translateY(0);
    transition:opacity 300ms ease-out, transform 300ms ease-out, visibility 0s;
}
.tc-portal-side ul { list-style:none; margin:0; padding:0; }
.tc-portal-side li + li { margin-top:8px; }
.tc-portal-side a { display:flex; gap:8px; align-items:center; }
.tc-portal-side img { width:54px; height:54px; object-fit:cover; border-radius:6px; }
@media (max-width:660px) {
    .tc-portal-strip a[data-tooltip] { height:90px; }
    .tc-portal-strip img { width:90px; height:90px; }
    .tc-portal-footer { font-size:12px; }
}

/* Interview collection / portal cards */
.tc-portal-scroll--interviews {
    padding:4px 0 8px;
}
.tc-interview-strip {
    display:flex;
    gap:4px;
    width:max-content;
    min-width:100%;
    margin:0;
    padding:0;
    white-space:nowrap;
}
.tc-interview-card {
    position:relative;
    flex:0 0 200px;
    width:200px;
    height:150px;
    margin:0;
    padding:0;
    overflow:hidden;
    border-radius:5px;
    background:#111;
}
.tc-interview-card > a {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    color:#fff;
    text-decoration:none;
}
.tc-interview-card img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:5px;
}
.tc-interview-strip--portal .tc-interview-card img {
    opacity:1;
    transition:opacity .5s ease;
}
.tc-interview-strip--portal.tc-interview-strip--animated .tc-interview-card img {
    opacity:0;
}
.tc-interview-strip--portal.tc-interview-strip--animated .tc-interview-card img.visible {
    opacity:1;
}
.tc-interview-card figcaption {
    box-sizing:border-box;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    padding:6px 7px;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-family:Scada, Arial, sans-serif;
    font-size:13px;
    line-height:1.2;
    text-align:left;
    white-space:normal;
    opacity:0;
    transition:opacity .5s ease;
}
.tc-interview-card figcaption strong,
.tc-interview-card figcaption em {
    display:block;
}
.tc-interview-card figcaption em {
    margin-top:2px;
    font-size:12px;
    font-weight:normal;
}
.tc-interview-card:hover figcaption,
.tc-interview-card:focus-within figcaption {
    opacity:1;
}
.tc-portal-footer--interviews {
    font-family:Oswald, Scada, sans-serif;
}
.tc-interview-gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
    gap:8px;
}
.tc-interview-card--page {
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;
}
.tc-interview-card--page img {
    opacity:1;
}
.tc-portal-side a > span {
    display:flex;
    min-width:0;
    flex-direction:column;
}
.tc-portal-side small {
    margin-top:2px;
    font-size:11px;
    line-height:1.2;
    opacity:.75;
}
@media (hover:none), (pointer:coarse) {
    .tc-interview-card figcaption {
        opacity:1;
    }
}
@media (max-width:660px) {
    .tc-interview-card {
        flex-basis:180px;
        width:180px;
        height:135px;
    }
    .tc-interview-card--page {
        width:100%;
        height:auto;
    }
    .tc-interview-card figcaption {
        font-size:12px;
        padding:5px 6px;
    }
    .tc-interview-card figcaption em {
        font-size:11px;
    }
}