/* Portugal Information page styles.
   Loaded only for this page by information.php. */

#body.portugal-golden-age-page .image-page-header .carousel-content-container {
    height: 285px;
    background-size: cover;
    background-position: center;
}

#body.portugal-golden-age-page .inner-wrapper {
    width: 100%;
    max-width: 1180px;
    margin: 32px auto 55px;
    padding-right: 30px;
    padding-left: 30px;
    box-sizing: border-box;
}

#body.portugal-golden-age-page .inner-content {
    float: none;
    width: 100%;
    max-width: none;
    padding: 0;
}

#body.portugal-golden-age-page .information-content {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 38px 44px 42px;
    background: #fff;
    border: 1px solid #d5d5d5;
    box-sizing: border-box;
    overflow: visible;
}

#body.portugal-golden-age-page h1.page-title {
    float: none;
    margin: 0 0 12px;
    color: #3b7bcd;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

#body.portugal-golden-age-page .pi-guide {
    color: #484848;
}

#body.portugal-golden-age-page .pi-guide p,
#body.portugal-golden-age-page .pi-guide li,
#body.portugal-golden-age-page .pi-guide td,
#body.portugal-golden-age-page .pi-guide th,
#body.portugal-golden-age-page .pi-guide span {
    font-size: 16px;
    line-height: 1.62;
}

#body.portugal-golden-age-page .pi-guide p {
    margin: 0 0 15px;
}

#body.portugal-golden-age-page .pi-guide ul,
#body.portugal-golden-age-page .pi-guide ol {
    margin-top: 10px;
    margin-bottom: 18px;
}

#body.portugal-golden-age-page .pi-guide a {
    color: #3b68c9;
    font-weight: 600;
    text-decoration: none;
}

#body.portugal-golden-age-page .pi-guide a:hover,
#body.portugal-golden-age-page .pi-guide a:focus {
    color: #244fa8;
    text-decoration: underline;
}

#body.portugal-golden-age-page .pi-eyebrow,
#body.portugal-golden-age-page .pi-kicker {
    margin: 0 0 14px;
    color: #139a68;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.3;
    text-transform: uppercase;
}

#body.portugal-golden-age-page .pi-intro {
    max-width: 1000px;
    margin-bottom: 24px;
}

#body.portugal-golden-age-page .pi-lead {
    margin-bottom: 14px;
    color: #343434;
    font-size: 19px !important;
    line-height: 1.62 !important;
}

#body.portugal-golden-age-page .pi-section {
    clear: both;
    margin-top: 39px;
    padding-top: 32px;
    border-top: 1px solid #e1e1e1;
}

#body.portugal-golden-age-page .pi-section > h2,
#body.portugal-golden-age-page .pi-source-box > h2,
#body.portugal-golden-age-page .pi-cta > h2 {
    margin: 0 0 18px;
    color: #5172d8;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.24;
}

#body.portugal-golden-age-page .pi-guide h3 {
    margin: 0 0 9px;
    color: #8d1717;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.34;
}

#body.portugal-golden-age-page .pi-soft-section {
    margin-right: -22px;
    margin-left: -22px;
    padding: 32px 22px 8px;
    background: #f7f9fc;
    border: 1px solid #e0e6ef;
    border-radius: 7px;
}

#body.portugal-golden-age-page .pi-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 8px;
    padding: 15px;
    background: #f5f8fc;
    border: 1px solid #d9e1ec;
    border-radius: 5px;
}

#body.portugal-golden-age-page .pi-jump-links a {
    display: inline-block;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #cbd7e7;
    border-radius: 4px;
    color: #3d5f91;
    font-size: 14px;
    font-weight: 700;
}

#body.portugal-golden-age-page .pi-jump-links a:hover,
#body.portugal-golden-age-page .pi-jump-links a:focus {
    background: #eaf0fb;
    border-color: #aebfda;
    text-decoration: none;
}

#body.portugal-golden-age-page .pi-grid {
    display: grid;
    gap: 18px;
    margin: 22px 0 8px;
}

#body.portugal-golden-age-page .pi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#body.portugal-golden-age-page .pi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#body.portugal-golden-age-page .pi-card {
    min-width: 0;
    padding: 22px 21px 19px;
    background: #fff;
    border: 1px solid #d7dce4;
    border-top: 4px solid #139a68;
    border-radius: 6px;
    box-sizing: border-box;
}

#body.portugal-golden-age-page .pi-card:nth-child(3n+2) { border-top-color: #5172d8; }
#body.portugal-golden-age-page .pi-card:nth-child(3n) { border-top-color: #d39a13; }
#body.portugal-golden-age-page .pi-card p:last-child { margin-bottom: 0; }

#body.portugal-golden-age-page .pi-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 24px;
}

#body.portugal-golden-age-page .pi-stat {
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #d9dfe8;
    border-radius: 5px;
}

#body.portugal-golden-age-page .pi-stat strong,
#body.portugal-golden-age-page .pi-stat span { display: block; }
#body.portugal-golden-age-page .pi-stat strong {
    margin-bottom: 5px;
    color: #335fbf;
    font-size: 20px;
    line-height: 1.25;
}
#body.portugal-golden-age-page .pi-stat span { color: #4f4f4f; font-size: 14px; line-height: 1.45; }

#body.portugal-golden-age-page .pi-note,
#body.portugal-golden-age-page .pi-alert {
    margin: 24px 0;
    padding: 19px 22px;
    border-radius: 5px;
}

#body.portugal-golden-age-page .pi-note {
    background: #edf3fb;
    border: 1px solid #cddbef;
    border-left: 5px solid #3b7bcd;
}

#body.portugal-golden-age-page .pi-alert {
    background: #fff8e8;
    border: 1px solid #ead49b;
    border-left: 5px solid #d39a13;
}

#body.portugal-golden-age-page .pi-note strong,
#body.portugal-golden-age-page .pi-alert strong {
    display: block;
    margin-bottom: 5px;
    color: #594300;
    font-size: 17px;
}

#body.portugal-golden-age-page .pi-note p:last-child,
#body.portugal-golden-age-page .pi-alert p:last-child { margin-bottom: 0; }

#body.portugal-golden-age-page .pi-timeline {
    position: relative;
    margin: 24px 0 8px;
    padding: 0;
    list-style: none;
}

#body.portugal-golden-age-page .pi-timeline::before {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 114px;
    width: 2px;
    background: #ccd7e8;
    content: '';
}

#body.portugal-golden-age-page .pi-timeline li {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    gap: 34px;
    position: relative;
    margin: 0 0 20px;
}

#body.portugal-golden-age-page .pi-timeline li::before {
    position: absolute;
    top: 7px;
    left: 108px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid #3b7bcd;
    border-radius: 50%;
    box-sizing: border-box;
    content: '';
}

#body.portugal-golden-age-page .pi-date {
    color: #3d536f;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.35 !important;
    text-align: right;
}

#body.portugal-golden-age-page .pi-timeline h3 { margin-top: 0; color: #3b7bcd; }
#body.portugal-golden-age-page .pi-timeline p:last-child { margin-bottom: 0; }

#body.portugal-golden-age-page .pi-source-box {
    margin: 40px 0 0;
    padding: 24px 26px;
    background: #f5f7fa;
    border: 1px solid #d8dee8;
    border-left: 5px solid #596b82;
    border-radius: 5px;
}

#body.portugal-golden-age-page .pi-source-box > h2 { font-size: 23px; }
#body.portugal-golden-age-page .pi-source-box ul { margin-bottom: 0; }

#body.portugal-golden-age-page .pi-cta {
    margin: 34px 0 0;
    padding: 25px 28px;
    background: #edf3fb;
    border-left: 5px solid #3b7bcd;
}
#body.portugal-golden-age-page .pi-cta > h2 { font-size: 25px; }
#body.portugal-golden-age-page .pi-cta p:last-child { margin-bottom: 0; }

#body.portugal-golden-age-page .pi-faq h3 { margin-top: 24px; color: #3b7bcd; }
#body.portugal-golden-age-page .pi-faq h3:first-child { margin-top: 0; }

#body.portugal-golden-age-page .pi-map-schematic {
    max-width: 840px;
    margin: 22px auto 28px;
}

#body.portugal-golden-age-page .pi-map-ocean {
    position: relative;
    height: 340px;
    overflow: hidden;
    background: linear-gradient(145deg, #dcecf4, #bcd8e8);
    border: 1px solid #aac5d5;
    border-radius: 7px;
}

#body.portugal-golden-age-page .pi-mainland-shape {
    position: absolute;
    top: 55px;
    right: 100px;
    width: 82px;
    height: 210px;
    background: #75a766;
    border: 3px solid #527b4a;
    border-radius: 42% 34% 48% 35% / 20% 24% 40% 35%;
    transform: rotate(5deg);
}

#body.portugal-golden-age-page .pi-map-islands { position: absolute; color: #527b4a; font-size: 29px !important; letter-spacing: 4px; }
#body.portugal-golden-age-page .pi-azores-dots { top: 95px; left: 105px; width: 180px; line-height: 1.2 !important; }
#body.portugal-golden-age-page .pi-madeira-dots { right: 245px; bottom: 62px; }
#body.portugal-golden-age-page .pi-map-label { position: absolute; z-index: 2; padding: 4px 7px; background: rgba(255,255,255,.8); color: #294359; font-size: 14px !important; font-weight: 700; border-radius: 3px; }
#body.portugal-golden-age-page .pi-label-azores { top: 57px; left: 85px; }
#body.portugal-golden-age-page .pi-label-mainland { top: 20px; right: 65px; }
#body.portugal-golden-age-page .pi-label-madeira { right: 210px; bottom: 25px; }
#body.portugal-golden-age-page .pi-caption { margin-top: 8px !important; color: #6b6b6b; font-size: 13px !important; text-align: center; }

#body.portugal-golden-age-page .pi-flag-demo {
    display: flex;
    position: relative;
    width: min(720px, 100%);
    aspect-ratio: 3 / 2;
    margin: 24px auto 8px;
    overflow: hidden;
    border: 1px solid #aaa;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
}
#body.portugal-golden-age-page .pi-flag-green { width: 40%; background: #176b45; }
#body.portugal-golden-age-page .pi-flag-red { width: 60%; background: #c92b3b; }
#body.portugal-golden-age-page .pi-armillary {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 40%;
    width: 31%;
    aspect-ratio: 1;
    background: #e4b62f;
    border: 8px double #8d6811;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}
#body.portugal-golden-age-page .pi-armillary span { color: #fff; font-size: 50px !important; text-shadow: 0 0 0 #234b88; }

#body.portugal-golden-age-page .pi-content-review {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid #e2e2e2;
    color: #686868;
    font-size: 13px;
    line-height: 1.55;
}

@media screen and (max-width: 900px) {
    #body.portugal-golden-age-page .pi-grid-3,
    #body.portugal-golden-age-page .pi-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
    #body.portugal-golden-age-page .image-page-header .carousel-content-container {
        height: 190px;
    }

    #body.portugal-golden-age-page .inner-wrapper {
        width: auto;
        margin: 18px 14px 35px;
        padding: 0;
    }

    #body.portugal-golden-age-page .information-content {
        padding: 24px 20px 30px;
    }

    #body.portugal-golden-age-page h1.page-title { font-size: 29px; }
    #body.portugal-golden-age-page .pi-lead { font-size: 17px !important; }
    #body.portugal-golden-age-page .pi-section > h2,
    #body.portugal-golden-age-page .pi-source-box > h2,
    #body.portugal-golden-age-page .pi-cta > h2 { font-size: 25px; }

    #body.portugal-golden-age-page .pi-grid-2,
    #body.portugal-golden-age-page .pi-grid-3,
    #body.portugal-golden-age-page .pi-stat-grid { grid-template-columns: 1fr; }

    #body.portugal-golden-age-page .pi-jump-links { display: grid; }
    #body.portugal-golden-age-page .pi-soft-section { margin-right: -8px; margin-left: -8px; padding-right: 12px; padding-left: 12px; }

    #body.portugal-golden-age-page .pi-timeline::before { left: 6px; }
    #body.portugal-golden-age-page .pi-timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 29px; }
    #body.portugal-golden-age-page .pi-timeline li::before { left: 0; }
    #body.portugal-golden-age-page .pi-date { text-align: left; }

    #body.portugal-golden-age-page .pi-map-ocean { height: 260px; }
    #body.portugal-golden-age-page .pi-mainland-shape { top: 42px; right: 42px; width: 55px; height: 165px; }
    #body.portugal-golden-age-page .pi-azores-dots { top: 84px; left: 28px; width: 110px; font-size: 22px !important; letter-spacing: 1px; }
    #body.portugal-golden-age-page .pi-madeira-dots { right: 132px; bottom: 43px; }
    #body.portugal-golden-age-page .pi-label-azores { top: 48px; left: 20px; }
    #body.portugal-golden-age-page .pi-label-mainland { right: 15px; }
    #body.portugal-golden-age-page .pi-label-madeira { right: 105px; bottom: 15px; }
    #body.portugal-golden-age-page .pi-armillary { border-width: 5px; }
    #body.portugal-golden-age-page .pi-armillary span { font-size: 31px !important; }
}