@charset "utf-8";

/* ---------- General ---------- */

a {
    color: inherit;
}

a:hover {
    color: inherit;
    text-decoration: underline;
}

.home-content,
.home-content *,
.ad-box-horizontal,
.ad-box-vertical {
    box-sizing: border-box;
}

.home-content {
    width: 100%;
    max-width: 928px;
    min-width: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: center;
    gap: 14px;
}

.section-1 {
    width: 100%;
    max-width: 704px;
    min-width: 0;
    flex: 1 1 704px;
    display: flex;
    flex-direction: column;
}

.latest-story,
.recent-story-main {
    width: 100%;
    max-width: 704px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.recent-story-main {
    margin-top: 1.1rem;
}

/* ---------- Section headings ---------- */

.sub-section-heading1,
.sub-section-heading2,
.sub-section-heading3 {
    width: 100%;
    margin: 0;
    padding: 1.7rem 0 0.2rem;
    color: #666;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.9em;
    font-weight: 900;
    line-height: 1.25;
    text-align: left;
}

/* ---------- Latest story ---------- */

.img-latest {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: medium solid #808080;
}

.story-title-latest {
    width: 100%;
    margin: 0;
    padding: 0.6rem 0 0;
    color: #C90;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1.3;
}

/* ---------- Recent stories ---------- */

.recent-story {
    width: 100%;
    max-width: 704px;
    min-width: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.story-grid {
    width: calc((100% - 12px) / 2);
    max-width: 346px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.img-recent {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: medium solid #808080;
}

.story-title-recent {
    width: 100%;
    margin: 0;
    padding: 0.65rem 0 0;
    color: #C90;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

/* Retained in case this class is used on another homepage item. */
.story-title-recent-font {
    font-size: inherit;
    text-align: left;
}

/* ---------- Photo-story categories ---------- */

.categories {
    width: 210px;
    max-width: 210px;
    min-width: 0;
    flex: 0 1 210px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* The heading shares the categories width, so its left edge aligns
   automatically with the left edge of the category photographs. */
.sub-section-heading2 {
    align-self: stretch;
}

.ctg-row1,
.ctg-row2,
.ctg-row3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.ctg-grid {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.img-ctg {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    border: medium solid #808080;
}

.ctg-title {
    width: 100%;
    margin: 0;
    padding: 0.2rem 0 0.8rem;
    color: #39F;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.25;
}

/* ---------- Advertisement placeholders ---------- */

.ad-box-horizontal {
    display: flex;
    width: 90%;
    max-width: 928px;
    height: 200px;
    align-self: center;
    justify-content: flex-start;
    margin: 1.2rem auto 2rem;
}

.ad-box-vertical {
    width: 160px;
    height: 600px;
    align-self: center;
    margin-top: 2rem;
}

/* ---------- Phones: up to 575.98px ---------- */

@media only screen and (max-width: 575.98px) {
    .home-content {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin: 0 auto;
    }

    .section-1,
    .latest-story,
    .recent-story-main,
    .recent-story {
        width: 100%;
        max-width: 100%;
    }

    .sub-section-heading1,
    .sub-section-heading2,
    .sub-section-heading3 {
        font-size: 0.95em;
    }

    /* Align the Recent Photo Stories heading with the photos below. */
    .sub-section-heading3 {
        width: 90%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .story-title-latest {
        padding-top: 0.3rem;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.85em;
    }

    .recent-story {
        flex-direction: column;
        align-items: center;
        row-gap: 1.5rem;
        column-gap: 0;
    }

    .story-grid {
        width: 90%;
        max-width: 320px;
    }

    .story-title-recent {
        padding-top: 0.4rem;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.8em;
    }

    .categories {
        width: 210px;
        max-width: 100%;
        flex: none;
        margin: 0 auto;
    }

    .ctg-row1,
    .ctg-row2,
    .ctg-row3 {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
    }

    .ctg-grid,
    .img-ctg {
        width: 100%;
        max-width: 100%;
    }

    .ctg-title {
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.85em;
    }

    .ad-box-horizontal {
        width: 75%;
        height: 1px;
    }

    .ad-box-vertical {
        display: none;
    }
}

/* ---------- Small tablets: 576px to 767.98px ---------- */

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
    .home-content {
        width: 100%;
        max-width: 550px;
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin: 0 auto;
    }

    .section-1,
    .latest-story,
    .recent-story-main,
    .recent-story {
        width: 100%;
        max-width: 100%;
    }

    .sub-section-heading1,
    .sub-section-heading2,
    .sub-section-heading3 {
        font-size: 0.9em;
    }

    .story-title-latest {
        padding-top: 0.3rem;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 1em;
    }

    .recent-story {
        flex-direction: row;
        gap: 12px;
    }

    .story-grid {
        width: calc((100% - 12px) / 2);
        max-width: none;
    }

    .story-title-recent {
        padding-top: 0.4rem;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.95em;
    }

    .categories {
        width: 465px;
        max-width: 100%;
        flex: none;
        margin: 0 auto;
    }

    .ctg-row1,
    .ctg-row2 {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
    }

    .ctg-row3 {
        width: 210px;
        max-width: 100%;
        margin: 0 auto;
    }

    .ctg-row1 .ctg-grid,
    .ctg-row2 .ctg-grid {
        width: 210px;
        max-width: calc((100% - 15px) / 2);
    }

    .ctg-row3 .ctg-grid {
        width: 100%;
    }

    .ctg-title {
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.92em;
    }

    .ad-box-horizontal {
        width: 85%;
        height: 200px;
    }

    .ad-box-vertical {
        display: none;
    }
}

/* ---------- Large tablets: 768px to 991.98px ---------- */

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .home-content {
        width: 100%;
        max-width: 704px;
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin: 0 auto;
    }

    .section-1,
    .latest-story,
    .recent-story-main,
    .recent-story {
        width: 100%;
        max-width: 100%;
    }

    .sub-section-heading1,
    .sub-section-heading2,
    .sub-section-heading3 {
        font-size: 0.9em;
    }

    .story-title-latest {
        padding-top: 0.3rem;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 1em;
    }

    .recent-story {
        flex-direction: row;
        gap: 12px;
    }

    .story-grid {
        width: calc((100% - 12px) / 2);
        max-width: none;
    }

    .story-title-recent {
        padding: 0.4rem 0.6rem 0 0.1rem;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.8em;
    }

    .categories {
        width: 465px;
        max-width: 100%;
        flex: none;
        margin: 0 auto;
    }

    .ctg-row1,
    .ctg-row2 {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
    }

    .ctg-row3 {
        width: 210px;
        max-width: 100%;
        margin: 0 auto;
    }

    .ctg-row1 .ctg-grid,
    .ctg-row2 .ctg-grid {
        width: 210px;
        max-width: calc((100% - 15px) / 2);
    }

    .ctg-row3 .ctg-grid {
        width: 100%;
    }

    .ctg-title {
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.8em;
    }

    .ad-box-horizontal {
        width: 85%;
        height: 200px;
    }

    .ad-box-vertical {
        display: none;
    }
}

/* ---------- Compact desktops: 992px to 1079.98px ---------- */

@media only screen and (min-width: 992px) and (max-width: 1079.98px) {
    .home-content {
        width: 100%;
        max-width: 925px;
    }

    .story-title-recent {
        padding: 0.4rem 0.6rem 0 0.1rem;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 0.8em;
    }

    .ad-box-horizontal {
        width: 90%;
        height: 200px;
    }

    .ad-box-vertical {
        display: none;
    }
}

/* ---------- Desktops: 1080px and above ---------- */

@media only screen and (min-width: 1080px) {
    .story-title-recent {
        padding: 0.4rem 0.6rem 0 0.1rem;
        font-size: 0.75em;
    }
}

@media only screen and (min-width: 1080px) and (max-width: 1199.98px) {
    .ad-box-horizontal {
        width: 80%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1365.98px) {
    .ad-box-horizontal {
        width: 85%;
    }
}

@media only screen and (min-width: 1366px) and (max-width: 1535.98px) {
    .ad-box-horizontal {
        width: 90%;
    }
}

@media only screen and (min-width: 1536px) {
    .ad-box-horizontal {
        width: 80%;
    }
}

/* Smaller recent-story photos on narrow phones, including iPhone SE */
@media only screen and (max-width: 375.98px) {

    .sub-section-heading3,
    .story-grid {
        width: 84%;
        max-width: 300px;
    }

    .recent-story {
        row-gap: 1.75rem;
    }
}
/* ---------- Desktop homepage alignment ---------- */

@media only screen and (min-width: 992px) {

    /* Keep both desktop columns exactly the same height */
    .home-content {
        align-items: stretch;
    }

    /* Equal distance between headings and photographs */
    .sub-section-heading1,
    .sub-section-heading2,
    .sub-section-heading3 {
        padding-bottom: 0.6rem;
    }

    /* Keep Latest Story at the top and push
       Recent Photo Stories towards the bottom */
    .section-1 {
        justify-content: space-between;
    }

    /* Align bottom edge of Recent Story photos
       with bottom edge of Water Leaders photo */
    .categories {
        padding-bottom: 6px;
    }

}