/* ==========================================================================
   company-history.css — Timeline-style Company History page
   ========================================================================== */

:root {
    --ch-blue-deep: #0a3573;
    --ch-blue:      #014a9f;
}

/* Hero is the shared .page-hero from about-us.css. */
.ch-hero__container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.ch-hero__main {
    flex: 1 1 420px;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Legend card (top-right of hero)
   -------------------------------------------------------------------------- */
.ch-legend {
    flex: 0 1 440px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    padding: 22px 26px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
}

.ch-legend__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ch-legend__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.ch-legend__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 4px;
}

.ch-legend__name {
    white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Timeline wrapper — stacks periods chronologically
   -------------------------------------------------------------------------- */
.ch-timeline-wrapper {
    background: #fff;
}

.ch-timeline-wrapper .ch-period + .ch-period {
    padding-top: 0;
    border-top: 1px solid #eef0f4;
}

/* --------------------------------------------------------------------------
   Timeline period
   -------------------------------------------------------------------------- */
.ch-period {
    background: #fff;
    padding: 60px 24px 60px;
}

.ch-period__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 36px;
    align-items: stretch;
}

/* Vertical dark-blue period label */
.ch-period__label {
    flex: 0 0 78px;
    background: linear-gradient(180deg, var(--ch-blue-deep) 0%, var(--ch-blue) 100%);
    border-radius: 22px;
    display: grid;
    place-items: center;
    padding: 28px 0;
    min-height: 340px;
}

.ch-period__label span {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.ch-period__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Events list with dotted connecting line
   -------------------------------------------------------------------------- */
.ch-events {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ch-events::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 32px;
    bottom: 32px;
    border-left: 2px dotted #c8cbd2;
    z-index: 0;
}

.ch-event {
    display: grid;
    grid-template-columns: 48px 110px 1fr;
    align-items: center;
    column-gap: 28px;
    padding: 14px 0;
    position: relative;
    z-index: 1;
}

.ch-event__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--icon-color, var(--ch-blue));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ch-event__year {
    font-size: 26px;
    font-weight: 700;
    color: var(--icon-color, var(--ch-blue));
    line-height: 1;
}

.ch-event__text {
    font-size: 14px;
    line-height: 1.6;
    color: #2b2b2b;
    width: 700px;
}

/* --------------------------------------------------------------------------
   Portraits row
   -------------------------------------------------------------------------- */
.ch-portraits {
    display: flex;
    gap: 18px;
    margin: 28px 0 8px;
    padding-left: 78px;
    flex-wrap: wrap;
}

.ch-portraits img {
    height: 170px;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    background: #eee;
}

/* --------------------------------------------------------------------------
   Read more link
   -------------------------------------------------------------------------- */
.ch-period__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

.ch-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2b2b2b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #2b2b2b;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ch-read-more:hover {
    color: var(--ch-blue);
    border-bottom-color: var(--ch-blue);
}

.ch-read-more i {
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .ch-legend {
        flex: 1 1 100%;
    }

    .ch-period {
        padding: 48px 20px 64px;
    }

    .ch-period__inner {
        gap: 24px;
    }

    .ch-period__label {
        flex: 0 0 64px;
        min-height: 300px;
    }

    .ch-period__label span {
        font-size: 18px;
    }

    .ch-event {
        grid-template-columns: 48px 90px 1fr;
        column-gap: 20px;
    }

    .ch-event__year {
        font-size: 22px;
    }

    .ch-portraits {
        padding-left: 0;
    }

    .ch-portraits img {
        height: 140px;
    }
}

@media (max-width: 768px) {
    .ch-period {
        padding: 36px 16px 56px;
    }

    .ch-period__inner {
        flex-direction: column;
        gap: 20px;
    }

    .ch-period__label {
        min-height: auto;
        padding: 14px 22px;
        flex: 0 0 auto;
        align-self: flex-start;
    }

    .ch-period__label span {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 16px;
    }

    .ch-events::before {
        left: 19px;
    }

    .ch-event {
        grid-template-columns: 40px 1fr;
        grid-template-areas:
            "icon year"
            "icon text";
        column-gap: 16px;
        row-gap: 4px;
        padding: 12px 0;
    }

    .ch-event__icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        grid-area: icon;
        align-self: start;
        margin-top: 2px;
    }

    .ch-event__year {
        grid-area: year;
        font-size: 20px;
    }

    .ch-event__text {
        grid-area: text;
        font-size: 13px;
    }

    .ch-portraits {
        gap: 12px;
        margin-top: 20px;
    }

    .ch-portraits img {
        height: 110px;
    }
}

@media (max-width: 480px) {
    .ch-portraits img {
        height: 90px;
    }
}

/* ==========================================================================
   Single corporate-history map image (clickable, links to sojitz.com)
   ========================================================================== */
.ch-map-section {
    background: #fff;
    padding: 64px 24px 88px;
}

.ch-map-section__inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.ch-map-link {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ch-map-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(1, 74, 159, 0.18);
}

.ch-map-link:focus-visible {
    outline: 3px solid rgba(1, 74, 159, 0.45);
    outline-offset: 4px;
}

.ch-map-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .ch-map-section {
        padding: 40px 16px 56px;
    }
}

/* ==========================================================================
   History DETAIL page — long-form reading layout
   ========================================================================== */
.ch-detail {
    background: #fff;
    padding: 56px 24px 80px;
}

.ch-detail__inner {
    max-width: 920px;
    margin: 0 auto;
}

.ch-detail__section + .ch-detail__section {
    margin-top: 36px;
}

.ch-detail__heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--ch-blue-deep);
    margin: 0 0 18px;
    line-height: 1.3;
}

.ch-detail__paragraph {
    font-size: 16px;
    line-height: 1.75;
    color: #2b2b2b;
    margin: 0 0 18px;
}

.ch-detail__paragraph:last-child {
    margin-bottom: 0;
}

/* Captioned portraits grid */
.ch-detail__portraits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.ch-detail__portrait {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ch-detail__portrait img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    background: #f0f1f3;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    display: block;
}

.ch-detail__portrait figcaption {
    font-size: 14px;
    line-height: 1.5;
    color: #4b4b4b;
}

/* Back to timeline link */
.ch-detail__footer {
    margin-top: 56px;
    display: flex;
    justify-content: flex-start;
}

.ch-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ch-blue);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}

.ch-detail__back:hover {
    border-bottom-color: var(--ch-blue);
}

.ch-detail__back i {
    font-size: 18px;
}

@media (max-width: 768px) {
    .ch-detail {
        padding: 36px 16px 56px;
    }

    .ch-detail__heading {
        font-size: 22px;
    }

    .ch-detail__paragraph {
        font-size: 15px;
        line-height: 1.7;
    }

    .ch-detail__portraits {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ch-detail__portrait img {
        height: 220px;
    }
}