/*====================================================
  ARTICLES PAGE
  Reuses the shared header + fonts from style.css.
  Only page-specific styles live here.
====================================================*/

.articles-body {
    margin: 0;
    background: #050505;
}

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

.art-hero {
    height: 862px;
    display: flex;
    flex-direction: column;
    /* Supplied smoke background image, covering the whole hero */
    background-image: url("../assets/image-08.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #050505;
}

/* Content area above the bottom strip */
.art-hero-content {
    flex: 1;
    display: flex;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: var(--header-height) 40px 0;
    box-sizing: border-box;
    min-height: 0;
}

/* Left 48% / right 52% */
.art-left {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: flex-end;          /* portrait bottom-aligned */
    padding-left: 0;
    box-sizing: border-box;
}

.art-left img {
    display: block;
    width: auto;
    height: 660px;                   /* keep natural aspect, no crop */
    max-width: none;
}

.art-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* vertically centered */
    align-items: flex-end;          /* aligned toward the right */
    text-align: right;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Title */
.art-title {
    margin: 0 0 22px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 92px;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
}

/* Buttons */
.art-buttons {
    display: flex;
    gap: 16px;
}

.art-btn {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 28px;
    border-radius: 4px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
}

.art-btn.dark  { background: #3b3b3b; color: #ffffff; }
.art-btn.light { background: #ffffff; color: #000000; }


/*====================================================
  BOTTOM STRIP
====================================================*/

.art-strip {
    height: 90px;
    display: flex;
    align-items: center;
    background: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.art-strip-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.art-strip span {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}


/*====================================================
  RESPONSIVE
====================================================*/

/* Tablet - image above content */
@media (max-width: 1000px) {
    .art-hero { height: auto; }
    .art-hero-content {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: calc(var(--header-height) + 40px) 20px 40px;
    }
    .art-left, .art-right {
        flex: 1 1 auto;
        max-width: 100%;
        padding: 0;
        align-items: center;
        text-align: center;
    }
    .art-title { font-size: 84px; }
    .art-strip-inner { flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
}

/* Mobile - buttons stack */
@media (max-width: 600px) {
    .art-title { font-size: 60px; }
    .art-buttons { flex-direction: column; align-items: center; }
    .art-strip { height: auto; padding: 16px 0; }
}


/*====================================================
  ARTICLES LIST SECTION
====================================================*/

.al-section {
    /* Same white patterned background asset already used on the site */
    background: url("../assets/image-09.jpg") center center / cover no-repeat;
    background-color: #f1f1f1;
    padding: 84px 40px;
    box-sizing: border-box;
}

.al-container {
    max-width: 1180px;
    margin: 0 auto;
}

/* Category */
.al-category {
    margin-bottom: 16px;
}

.al-heading {
    margin: 0 0 10px;
    text-align: center;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #f58220;
    line-height: 1;
}

.al-divider {
    width: 100%;
    height: 2px;
    background: #4b4b4b;
    margin-bottom: 18px;
}

/* Row */
.al-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 68px;
    border-bottom: 1px solid #d6d6d6;
}

.al-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.al-bullet {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111111;
    margin-right: 12px;
}

.al-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #111111;
}

.al-date {
    margin-left: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: #7a7a7a;
}

/* Read more button */
.al-readmore {
    flex: 0 0 auto;
    background: #f58220;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 2px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
}

/* Bottom text + CTA */
.al-foot-text {
    margin: 24px 0 18px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
}

.al-cta-wrap {
    text-align: center;
}

.al-cta {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 3px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
}

/* Responsive */
@media (max-width: 640px) {
    .al-section { padding: 50px 20px; }
    .al-heading { font-size: 36px; }
    .al-row {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 0;
    }
    .al-left { flex-wrap: wrap; }
}


/*====================================================
  ADDED RESPONSIVE — all devices
  (only media-query additions; desktop rules unchanged)
====================================================*/

/* Tablet & below: hero portrait must scale, never overflow */
@media (max-width: 1000px) {
    .art-left img {
        width: auto;
        max-width: 100%;
        height: auto;
    }
    .art-right { padding-right: 0; align-items: center; text-align: center; }
}

/* Small tablet */
@media (max-width: 768px) {
    .art-title { font-size: 68px; }
    .al-section { padding: 60px 24px; }
}

/* Phone */
@media (max-width: 480px) {
    .art-hero-content { padding: calc(var(--header-height) + 28px) 16px 32px; }
    .art-title { font-size: 46px; }
    .art-buttons { width: 100%; }
    .art-btn {
        flex: 1 1 auto;
        justify-content: center;
        height: 46px;
        padding: 0 16px;
        font-size: 20px;
    }
    .art-strip span { font-size: 13px; letter-spacing: 0.2px; }

    .al-section { padding: 44px 16px; }
    .al-heading { font-size: 30px; }
    .al-title { font-size: 17px; }
    .al-date { font-size: 15px; }
    .al-readmore { font-size: 16px; padding: 6px 14px; }
    .al-cta { font-size: 20px; padding: 12px 22px; }
    .al-foot-text { font-size: 16px; }
}

/* Very small phone */
@media (max-width: 360px) {
    .art-title { font-size: 40px; }
    .al-heading { font-size: 26px; }
}