/* -----------------------------------------------------
   GLOBAL
----------------------------------------------------- */

body {
    font-family: Arial, sans-serif;
    background: #f8f8f8;
    color: #222;
}

/* Palette:
   Dark grey: #6B6E70
   Green accent: #E38200
   Black / white
----------------------------------------------------- */


.lp-wrapper {
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
}

/* -----------------------------------------------------
   HERO SECTION
----------------------------------------------------- */

.hero-section {
    width: 90%;
    margin: 60px auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 40px;
}

.hero-image-wrapper {
    position: relative;
    display: block;
    height: 550px;
    border-radius: 14px;
    overflow: hidden;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2), transparent);
}

.hero-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    color: white;
    text-align: left;
}

.hero-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 5px;
    align-items: center;
}

.featured-pill {
    background: #E38200;
    padding: 6px 12px;
    border-radius: 40px;
    font-size: 14px;
    color: white;
}

.hero-readtime {
    font-size: 14px;
    opacity: 0.8;
}

.hero-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    margin-top: 8px;
}

.hero-description {
    max-width: 90%;
    margin-bottom: 18px;
    opacity: 0.9;
}

.hero-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-author img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid white;
}

.hero-author-name {
    font-weight: 600;
}

.hero-author-date {
    font-size: 14px;
    opacity: 0.85;
}


/* -----------------------------------------------------
   HERO SIDEBAR — NEWSLETTER & TRENDING
----------------------------------------------------- */

.hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.newsletter-box {
    background: #E38200;
    color: white;
    padding: 25px;
    border-radius: 12px;
}

.newsletter-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-title {
    display: inline-flex;
    font-size: 18px;
    font-weight: 600;
}

.newsletter-icon {
    font-size: 32px;
}

.newsletter-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    margin: 10px 0;
    box-sizing: border-box;
}

.newsletter-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background: white;
    color: #E38200;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
}

.trending-topics-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #ddd;
}

.tt-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top: 0px;
}

.tt-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

.tt-list a.tt-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.tt-list a.tt-item:hover {
    color: #E38200; /* green accent */
}

.tt-item span {
    font-weight: 900;
    color: #6B6E70;
}


/* -----------------------------------------------------
   RECENT ARTICLES
----------------------------------------------------- */

.recent-section {
    width: 90%;
    margin: 60px auto;
}

.recent-header h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: left;
}

.recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
    gap: 30px;
}

.recent-card {
    background: white;
    border-radius: 12px;
    display: block;
    overflow: hidden;
    border: 1px solid #ddd;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease;
    text-align: left;
}

.recent-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.recent-img-wrap img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.recent-info {
    padding: 20px;
}

.recent-info hr {
    border: 0;                  /* Remove default border */
    height: 1px;                /* Set your thickness */
    background-color: #D3D3D3;  /* Light grey line */
    margin: 15px 0;             /* Optional: spacing */
}

.recent-meta {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
    color: #6B6E70;
    font-size: 14px;
    align-items: center;
}

.recent-category {
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

/* WHISKEYPULSE CATEGORY COLORS */

/* Whiskey – Deep Barrel Amber */
.recent-category-whiskey {
    background-color: #A05A28;   /* Barrel-Aged Amber */
    color: #ffffff;
}

/* Whisky – Highland Gold */
.recent-category-whisky {
    background-color: #C89B3C;   /* Scotch / Single Malt Gold */
    color: #000000;
}

/* Industry – Charred Oak Black */
.recent-category-industry {
    background-color: #2E2B28;   /* Charcoal / Charred Oak */
    color: #ffffff;
}

/* Spirits – Warm Copper */
.recent-category-spirits {
    background-color: #B56A3A;   /* Copper Still Brown */
    color: #ffffff;
}

/* Distilleries – Barrel Wood Brown */
.recent-category-distilleries {
    background-color: #7A4E2D;   /* Rustic Barrel Wood */
    color: #ffffff;
}


.recent-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;

    /* Line clamping */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Fixed height for 1–2 lines */
    line-height: 1.3em;
    height: calc(1.3em * 2);   /* = exactly 2 lines of space */
}

.recent-desc {
     font-size: 15px;
    color: #444;
    margin-bottom: 15px;

    /* Line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 3;       /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Fixed height for consistent layout */
    line-height: 1.4em;
    height: calc(1.4em * 3);     /* Reserve space for 3 lines */
}

.recent-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recent-save {
    font-size: 22px;
    opacity: 0.6;
}

.author-date {
    color: #6B6E70;
    font-size: 13px;
}


/* -----------------------------------------------------
   LOAD MORE BUTTON
----------------------------------------------------- */

.load-more-container {
    text-align: center;
    margin-top: 40px;
}

.load-more-btn {
    padding: 12px 25px;
    border-radius: 8px;
    border: 1px solid #6B6E70;
    background: white;
    color: #6B6E70;
    cursor: pointer;
    font-weight: 600;
}



/* -----------------------------------------------------
   TRENDING NOW SECTION
----------------------------------------------------- */

.trending-now-section {
    width: 90%;
    margin: 70px auto;
    box-sizing: border-box;
}

.tn-header {
    text-align: left;
}

.tn-header h2 {
    font-size: 30px;
    font-weight: 700;
}

.tn-header p {
    color: #6B6E70;
    margin-top: 4px;
}

.tn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(500px,1fr));
    gap: 30px;
    margin-top: 30px;
}

.tn-card {
    background: #f2f2f2;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
    text-align: left;
}

.tn-card:hover {
    background: #e9e9e9;
}

.tn-img-wrap img {
    width: 180px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
}

.tn-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.tn-number {
    font-size: 28px;
    font-weight: 900;
    color: #E38200;
}

.tn-category {
    padding: 4px 10px;
    border-radius: 6px;
}

.tn-views {
    font-size: 13px;
    color: #6B6E70;
}

.tn-title {
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0;
}

.tn-desc {
    font-size: 14px;
    margin-bottom: 10px;
}

.tn-author {
    font-size: 13px;
    color: #6B6E70;
}


/* -----------------------------------------------------
   RESPONSIVE
----------------------------------------------------- */

@media (max-width: 900px) {
    .hero-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .tn-grid {
        grid-template-columns: 1fr;  /* 1 card per row */
        gap: 20px;
    }

    .tn-card {
        flex-direction: column;        /* stack vertically */
        padding: 15px;
        border-radius: 12px;
    }

    .tn-img-wrap img {
        width: 100%;                   /* full width image */
        height: 180px;                 /* consistent */
        border-radius: 10px;
        object-fit: cover;
    }

    .tn-meta {
        gap: 8px;
        flex-wrap: wrap;               /* allow wrapping */
    }

    .tn-number {
        font-size: 22px;               /* slightly smaller */
    }

    .tn-category {
        font-size: 12px;
        padding: 3px 8px;
    }

    .tn-title {
        font-size: 18px;
        margin: 6px 0;
        line-height: 1.3;
    }

    .tn-author {
        font-size: 12px;
    }
}