/* ==========================================================
   FFXIVPenumbra.com
   GUIDES PAGE
   Clean • Text Focused • Premium • Responsive
   ========================================================== */


/* ==========================================================
   PAGE ROOT
========================================================== */

.guides-page {
    position: relative;
    width: 100%;
    overflow: hidden;

    color: #0b2342;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 48%,
            #f5faff 100%
        );

    font-family:
        "Roboto",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


.guides-container {
    width: min(
        1080px,
        calc(100% - 48px)
    );

    margin: 0 auto;
}


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

.guides-hero {
    padding:
        62px 0
        34px;

    text-align: center;
}


.guides-hero-inner {
    max-width: 820px;
}


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

.guides-kicker {
    display: inline-block;

    margin-bottom: 14px;

    color: #0b8ef0;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .20em;
}


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

.guides-title {
    margin: 0;

    color: #081f3d;

    font-family:
        "Outfit",
        sans-serif;

    font-size:
        clamp(
            44px,
            5vw,
            64px
        );

    line-height: 1.03;

    font-weight: 800;

    letter-spacing: -.045em;
}


.guides-title span {
    color: #0b8ff4;
}


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

.guides-lead {
    max-width: 720px;

    margin:
        17px auto 0;

    color: #53677f;

    font-size: 16.5px;

    line-height: 1.65;

    font-weight: 500;
}


/* ==========================================================
   SECTION SPACING
========================================================== */

.guides-start-section,
.guides-popular-section,
.guides-categories-section,
.guides-path-section,
.guides-bottom-section {
    padding:
        10px 0
        18px;
}


/* ==========================================================
   COMMON PANEL
========================================================== */

.guides-panel,
.guides-path-panel {
    padding: 28px;

    border:
        1px solid
        #dce9f5;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #f3faff 0%,
            #ffffff 100%
        );

    box-shadow:
        0 14px 40px
        rgba(23, 72, 118, .04);
}


/* ==========================================================
   SECTION HEAD
========================================================== */

.guides-section-head {
    margin-bottom: 22px;
}


.guides-section-label {
    display: block;

    margin-bottom: 6px;

    color: #168ee7;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;
}


.guides-section-head h2 {
    margin: 0;

    color: #0b2342;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.025em;
}


.guides-section-head p {
    max-width: 680px;

    margin:
        6px 0 0;

    color: #60748c;

    font-size: 13.5px;

    line-height: 1.6;
}


/* ==========================================================
   START HERE GRID
========================================================== */

.guides-start-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


/* ==========================================================
   START CARD
========================================================== */

.guides-start-card {
    position: relative;

    min-height: 190px;

    padding: 22px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        #dbe7f2;

    border-radius: 13px;

    color: inherit;

    background:
        #ffffff;

    text-decoration: none;

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease,
        background 170ms ease;
}


.guides-start-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #f5fbff,
            #ffffff
        );
}


.guides-start-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #f3fcf8,
            #ffffff
        );
}


.guides-start-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #f8f5ff,
            #ffffff
        );
}


.guides-start-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #acd8f7;

    box-shadow:
        0 15px 32px
        rgba(19, 93, 151, .07);
}


.guides-card-number {
    display: block;

    margin-bottom: 22px;

    color: #0b91ef;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .12em;
}


.guides-start-card h3 {
    margin: 0;

    color: #10284a;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;
}


.guides-start-card p {
    margin:
        8px 0 0;

    color: #5f7289;

    font-size: 12px;

    line-height: 1.6;
}


.guides-card-arrow {
    margin-top: auto;

    padding-top: 18px;

    color: #0a8fe9;

    font-size: 13px;

    transition:
        transform 160ms ease;
}


.guides-start-card:hover
.guides-card-arrow {
    transform:
        translateX(4px);
}


/* ==========================================================
   POPULAR GUIDES GRID
========================================================== */

.guides-popular-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


/* ==========================================================
   POPULAR CARD
========================================================== */

.guides-popular-card {
    min-height: 115px;

    padding: 18px 19px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        16px;

    align-items: center;

    gap: 12px;

    border:
        1px solid
        #dce8f4;

    border-radius: 12px;

    color: inherit;

    background: #ffffff;

    text-decoration: none;

    transition:
        border-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}


.guides-popular-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #acd8f7;

    background:
        #fbfdff;

    box-shadow:
        0 12px 28px
        rgba(19, 89, 145, .055);
}


.guides-popular-card h3 {
    margin: 0;

    color: #10284a;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 800;
}


.guides-popular-card p {
    margin:
        6px 0 0;

    color: #62758c;

    font-size: 11px;

    line-height: 1.55;
}


.guides-popular-card > i {
    color: #0b91f2;

    font-size: 10px;

    transition:
        transform 160ms ease;
}


.guides-popular-card:hover > i {
    transform:
        translateX(3px);
}


/* ==========================================================
   CATEGORY GRID
========================================================== */

.guides-category-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 13px;
}


/* ==========================================================
   CATEGORY CARD
========================================================== */

.guides-category-card {
    min-height: 170px;

    padding: 20px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        #dce8f4;

    border-radius: 13px;

    color: inherit;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease;
}


.guides-category-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #acd8f7;

    box-shadow:
        0 14px 28px
        rgba(20, 88, 142, .06);
}


.guides-category-name {
    color: #10284a;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 16px;

    font-weight: 800;
}


.guides-category-card p {
    margin:
        8px 0 0;

    color: #63768d;

    font-size: 11px;

    line-height: 1.55;
}


.guides-category-action {
    margin-top: auto;

    padding-top: 16px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #0a80da;

    font-size: 10px;

    font-weight: 800;
}


.guides-category-card:hover
.guides-category-action i {
    transform:
        translateX(3px);
}


.guides-category-action i {
    transition:
        transform 160ms ease;
}


/* ==========================================================
   RECOMMENDED PATH
========================================================== */

.guides-path-panel {
    background:
        linear-gradient(
            145deg,
            #edf8ff 0%,
            #f9fcff 100%
        );
}


.guides-path {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 12px;

    align-items: center;
}


.guides-path > a {
    min-height: 90px;

    padding: 15px;

    display: grid;

    grid-template-columns:
        32px 1fr;

    gap: 10px;

    align-items: center;

    border:
        1px solid
        #dce8f4;

    border-radius: 11px;

    color: inherit;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.guides-path > a:hover {
    transform:
        translateY(-2px);

    border-color:
        #acd8f7;

    box-shadow:
        0 11px 24px
        rgba(17, 83, 137, .05);
}


.guides-path > a > span {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #159df7,
            #087bea
        );

    font-size: 10px;

    font-weight: 800;
}


.guides-path > a > div {
    display: flex;
    flex-direction: column;
}


.guides-path strong {
    color: #173554;

    font-size: 11.5px;

    font-weight: 800;
}


.guides-path small {
    margin-top: 3px;

    color: #6b7c91;

    font-size: 9.5px;

    line-height: 1.4;
}


.guides-path > i {
    color: #0a91ef;

    font-size: 12px;
}


/* ==========================================================
   BOTTOM SECTION
========================================================== */

.guides-bottom-section {
    padding-bottom: 68px;
}


.guides-bottom-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


/* ==========================================================
   BOTTOM CARDS
========================================================== */

.guides-bottom-card {
    min-height: 210px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    border-radius: 15px;
}


.guides-bottom-start {
    border:
        1px solid
        #cfe4f5;

    background:
        linear-gradient(
            145deg,
            #eef8ff,
            #ffffff
        );
}


.guides-bottom-help {
    border:
        1px solid
        #d9d2fa;

    background:
        linear-gradient(
            145deg,
            #f7f4ff,
            #ffffff
        );
}


.guides-bottom-card h2 {
    margin: 0;

    color: #0b2342;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 22px;

    font-weight: 800;
}


.guides-bottom-card p {
    max-width: 430px;

    margin:
        8px 0 0;

    color: #60748b;

    font-size: 12px;

    line-height: 1.6;
}


/* ==========================================================
   BOTTOM BUTTONS
========================================================== */

.guides-bottom-button {
    width: fit-content;

    min-height: 42px;

    margin-top: auto;

    padding:
        0 15px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    border:
        1px solid
        #168fe6;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #149df7,
            #087bea
        );

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}


.guides-bottom-help
.guides-bottom-button {
    border-color:
        #7358e7;

    background:
        linear-gradient(
            135deg,
            #8c6df4,
            #6746df
        );
}


.guides-bottom-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(11, 127, 218, .16);
}


/* ==========================================================
   FOCUS STATES
========================================================== */

.guides-page a:focus-visible {
    outline:
        3px solid
        rgba(10, 145, 240, .28);

    outline-offset: 3px;
}


/* ==========================================================
   1366PX DESKTOP OPTIMIZATION
========================================================== */

@media
(min-width: 981px)
and
(max-width: 1400px) {

    .guides-container {
        width:
            min(
                1000px,
                calc(100% - 46px)
            );
    }


    .guides-hero {
        padding:
            52px 0
            30px;
    }


    .guides-title {
        font-size:
            clamp(
                42px,
                4.5vw,
                57px
            );
    }


    .guides-panel,
    .guides-path-panel {
        padding: 26px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

    .guides-container {
        width:
            min(
                760px,
                calc(100% - 36px)
            );
    }


    .guides-hero {
        padding:
            50px 0
            30px;
    }


    .guides-title {
        font-size:
            clamp(
                39px,
                7vw,
                52px
            );
    }


    .guides-start-grid {
        grid-template-columns:
            1fr;
    }


    .guides-start-card {
        min-height: 150px;
    }


    .guides-popular-grid {
        grid-template-columns:
            1fr;
    }


    .guides-category-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .guides-path {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }


    .guides-path > i {
        display: none;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 680px) {

    .guides-container {
        width:
            calc(100% - 28px);
    }


    .guides-hero {
        padding:
            39px 0
            25px;
    }


    .guides-title {
        font-size: 36px;
    }


    .guides-lead {
        font-size: 14px;
    }


    .guides-panel,
    .guides-path-panel {
        padding: 20px;
    }


    .guides-section-head h2 {
        font-size: 22px;
    }


    .guides-section-head p {
        font-size: 12.5px;
    }


    .guides-start-card {
        min-height: 0;

        padding: 19px;
    }


    .guides-card-number {
        margin-bottom: 14px;
    }


    .guides-category-grid {
        grid-template-columns:
            1fr;
    }


    .guides-category-card {
        min-height: 145px;
    }


    .guides-path {
        grid-template-columns:
            1fr;
    }


    .guides-bottom-grid {
        grid-template-columns:
            1fr;
    }


    .guides-bottom-card {
        min-height: 190px;

        padding: 21px;
    }


    .guides-bottom-section {
        padding-bottom: 46px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .guides-title {
        font-size: 32px;
    }


    .guides-panel,
    .guides-path-panel {
        padding: 17px;
    }


    .guides-popular-card {
        padding: 16px;
    }


    .guides-bottom-card {
        padding: 18px;
    }

}
/* ==========================================================
   GUIDES - FONT AWESOME ICONS
========================================================== */


/* Hero */

.guides-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.guides-kicker i {
    font-size: 12px;
}


/* ==========================================================
   START HERE ICONS
========================================================== */

.guides-start-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.guides-start-top
.guides-card-number {
    margin: 0;
}


.guides-start-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #0b91ef;

    background: #eaf7ff;

    font-size: 19px;
}


.guides-start-card:nth-child(2)
.guides-start-icon {
    color: #16885e;

    background: #e9f8f1;
}


.guides-start-card:nth-child(3)
.guides-start-icon {
    color: #7655df;

    background: #f0ebff;
}


/* ==========================================================
   POPULAR GUIDE ICONS
========================================================== */

.guides-popular-card {
    grid-template-columns:
        45px
        minmax(0, 1fr)
        16px;
}


.guides-popular-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: #0b91ef;

    background: #eaf7ff;

    font-size: 19px;
}


.guides-popular-arrow {
    color: #0b91f2;

    font-size: 10px;

    transition:
        transform 160ms ease;
}


.guides-popular-card:hover
.guides-popular-arrow {
    transform:
        translateX(3px);
}


/* ==========================================================
   CATEGORY ICONS
========================================================== */

.guides-category-icon {
    width: 46px;
    height: 46px;

    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #0b91ef;

    background: #eaf7ff;

    font-size: 19px;
}


.guides-category-card:nth-child(2)
.guides-category-icon {
    color: #16885e;

    background: #e8f8f0;
}


.guides-category-card:nth-child(3)
.guides-category-icon {
    color: #7453dd;

    background: #f0ebff;
}


.guides-category-card:nth-child(4)
.guides-category-icon {
    color: #df782b;

    background: #fff1e8;
}


/* ==========================================================
   RECOMMENDED PATH ICONS
========================================================== */

.guides-path > a {
    position: relative;

    grid-template-columns:
        30px
        30px
        minmax(0, 1fr);
}


.guides-path-number {
    width: 30px !important;
    height: 30px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #159df7,
            #087bea
        ) !important;

    font-size: 9px !important;
    font-weight: 800;
}


.guides-path-icon {
    color: #0b91ef;

    font-size: 16px;
}


.guides-path-arrow {
    color: #0b91ef;

    font-size: 12px;
}


/* ==========================================================
   BOTTOM ICONS
========================================================== */

.guides-bottom-card {
    position: relative;
}


.guides-bottom-icon {
    width: 47px;
    height: 47px;

    margin-bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #0b91ef;

    background: #ffffff;

    border:
        1px solid
        #d4e8f7;

    font-size: 20px;
}


.guides-bottom-help
.guides-bottom-icon {
    color: #7655df;

    border-color: #dfd6ff;

    background: #ffffff;
}


/* ==========================================================
   MOBILE ICON FIXES
========================================================== */

@media (max-width: 680px) {

    .guides-popular-card {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            14px;
    }


    .guides-popular-icon {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }


    .guides-path > a {
        grid-template-columns:
            30px
            28px
            minmax(0, 1fr);
    }

}


@media (max-width: 390px) {

    .guides-popular-card {
        grid-template-columns:
            1fr;
    }


    .guides-popular-arrow {
        display: none;
    }

}