/**
 * ============================================
 * TYPOGRAPHY
 * ============================================
 * 
 * Base typography styles - ROBOTO FONT FAMILY
 */

/* ============================================
   GOOGLE FONTS - ROBOTO
   ============================================ */
@import url('roboto.css');

/* ============================================
   FONT FACES
   ============================================ */

/* Legacy font (only if needed) */
@font-face {
    font-family: 'Helvetica Neue Regular';
    src: url('../fonts/HelveticaNeue/HelveticaNeueBold.woff') format('woff');
}

/* ============================================
   BASE TYPOGRAPHY - ROBOTO
   ============================================ */

body {
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--line-height-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
    color: var(--text-light);
    margin: 0;
}

h1 {
    font-size: var(--text-3xl);
    margin-top: 60px;
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
    color: var(--text-light) !important;
}

h5 {
    font-size: var(--text-md);
}

h6 {
    font-size: var(--text-base);
}

p {
    margin: 0;
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--text-light);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-banner { font-size: var(--text-banner); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-lowercase { text-transform: lowercase; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   BANNER TITLE STYLES - ROBOTO
   ============================================ */

.banner-title,
.banner-small-heading {
    font-family: 'Roboto', sans-serif !important;
    background-repeat: repeat;
    background-position: cover;
    color: var(--text-light);
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    margin-top: 60px;
}

.banner-small-heading {
    font-size: 22px;
    font-weight: var(--font-bold);
}

/* ============================================
   SERIES/PLAYLIST TEXT
   ============================================ */

.seriesPlaylist {
    line-height: 18px;
    font-weight: var(--font-normal);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 767px) {
    .seriesPlaylist {
        -webkit-line-clamp: 2;
    }
}

@media (min-width: 300px) {
    .seriesPlaylist {
        -webkit-line-clamp: 4;
    }
}

/* ============================================
   CARD SUBTITLE
   ============================================ */

.card-sub-title {
    font-size: var(--text-sm);
    line-height: 1.3;
    margin-top: -3px;
}

.sub-title {
    font-size: var(--text-sm);
}