/* =========================================================
   THEHOURLYNEWS
   COMPONENTS
   PHASE 1
   HEADER • BUTTONS • TYPOGRAPHY
========================================================= */


/* =========================================================
   LOGO
========================================================= */

.site-logo{

    font-family:var(--font-heading);

    font-size:1.9rem;

    font-weight:var(--weight-bold);

    letter-spacing:-0.03em;

    color:var(--color-heading);

    white-space:nowrap;

}

.site-logo:hover{

    color:var(--color-heading);

}


/* =========================================================
   NAVIGATION
========================================================= */

.primary-navigation a{

    font-size:var(--text-sm);

    font-weight:var(--weight-medium);

    color:var(--color-heading);

    transition:color var(--transition-fast);

}

.primary-navigation a:hover{

    color:var(--color-accent);

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.search-button,
.mobile-menu-button{

    font-size:var(--text-sm);

    font-weight:var(--weight-medium);

    color:var(--color-heading);

}

.search-button:hover,
.mobile-menu-button:hover{

    color:var(--color-accent);

}


/* =========================================================
   SUBSCRIBE BUTTON
========================================================= */

.button--subscribe{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:42px;

    padding-inline:1.25rem;

    background:var(--color-primary);

    color:var(--white);

    border-radius:var(--radius-pill);

    font-size:var(--text-sm);

    font-weight:var(--weight-semibold);

    transition:all var(--transition-base);

}

.button--subscribe:hover{

    background:var(--color-primary-light);

    color:var(--white);

    transform:translateY(-1px);

}


/* =========================================================
   STORY CATEGORY
========================================================= */

.story-category{

    display:inline-block;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--color-text-light);

}


/* =========================================================
   STORY META
========================================================= */

.story-meta{

    display:flex;

    align-items:center;

    gap:var(--space-2);

    font-size:var(--text-sm);

    color:var(--color-text-light);

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading{

    padding-bottom:var(--space-4);

    border-bottom:1px solid var(--color-border);

}

.section-heading h2{

    font-size:2rem;

}

.section-heading a{

    font-size:var(--text-sm);

    font-weight:var(--weight-semibold);

    color:var(--color-text-light);

}


/* =========================================================
   BREAKING NEWS
========================================================= */

.breaking-news{

    border-bottom:1px solid var(--color-border);

}

.breaking-news__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.25rem .65rem;

    background:var(--color-accent);

    color:var(--white);

    border-radius:var(--radius-pill);

    font-size:.7rem;

    font-weight:700;

    letter-spacing:.08em;

}

.breaking-news__content a{

    font-size:var(--text-sm);

    font-weight:500;

    color:var(--color-heading);

}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-story__image img{

    aspect-ratio:16/9;

    object-fit:cover;

}


/* =========================================================
   FEATURE IMAGES
========================================================= */

.hero-card img,
.news-card img,
.feature-story img,
.feature-card img,
.technology-feature img,
.analysis-feature img,
.media-card img,
.mini-feature img{

    aspect-ratio:16/9;

    object-fit:cover;

}


/* =========================================================
   ARTICLE LINKS
========================================================= */

h1 a,
h2 a,
h3 a{

    color:inherit;

}

h1 a:hover,
h2 a:hover,
h3 a:hover{

    color:inherit;

}


/* =========================================================
   HERO HEADLINE
========================================================= */

.hero-story h1{

    font-size:3.25rem;

    line-height:1.05;

}
.hero{

    padding-top:2rem;

    padding-bottom:3rem;

}

.hero-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:2rem;

    align-items:start;

}

.hero-secondary{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.hero-card{

    display:flex;

    flex-direction:column;

    gap:0.75rem;

}

.hero-card img{

    width:100%;

    display:block;

    border-radius:6px;

}

.hero-story__image img{

    width:100%;

    display:block;

    border-radius:6px;

}


/* =========================================================
   HERO CARD TITLES
========================================================= */

.hero-card h2{

    font-size:1.45rem;

    line-height:1.2;

}


/* =========================================================
   NEWS CARD TITLES
========================================================= */

.news-card h3{

    font-size:1.35rem;

    line-height:1.25;

}
/* =========================================================
   HERO FEATURE
========================================================= */

.hero-story{

    display:flex;

    flex-direction:column;

}

.hero-story__image{

    overflow:hidden;

}

.hero-story__image img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

}

.hero-story__content{

    padding-top:var(--space-5);

}

.hero-story h1{

    font-size:3.5rem;

    line-height:1.05;

    max-width:14ch;

    margin-top:var(--space-2);

    margin-bottom:var(--space-3);

}

.hero-story p{

    font-size:var(--text-lg);

    color:var(--color-text);

    max-width:65ch;

}