/* ─── Section ─────────────────────────────────────────────────────────────── */
/*
 * Utility classes on the element:  relative  w-full  overflow-hidden
 * Only unique properties stay here.
 */
.section-404 {
    min-height: 1000px;
    background: var(--white);
}

/* ─── Background ──────────────────────────────────────────────────────────── */
/*
 * Utility classes on .section-404__bg:  absolute  inset-0  overflow-hidden  pointer-none
 * No additional CSS needed for the wrapper itself.
 *
 * Utility classes on img:  absolute  block
 * Only the Figma-specific crop positioning stays here.
 *
 * Desktop crop: the image is 135.83% wide × 285.23% tall, pulled up by 94.76%
 * so the ruined-house detail appears in the right half of the frame.
 */

.section-404__bg-img {
    width: 135.83%;
    height: 285.23%;
    top: -94.76%;
    left: 0;
    max-width: none;
}

/* ─── Content ─────────────────────────────────────────────────────────────── */
/*
 * Utility classes on the element:  absolute  d-flex  flex-col
 *
 * Desktop positioning from Figma:
 *   left: calc(50% − 420px) + translateX(−50%)  →  visual left = calc(50% − 700px)  ≈ 140px @ 1680px
 *   top: 50% + translateY(−50%)                 →  vertically centred in the section
 */

.section-404__content {
    left: calc(50% - 420px);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    gap: 20px;
}

/* ─── 404 Number ──────────────────────────────────────────────────────────── */

.section-404__number {
    font-family: var(--font-plus);
    font-weight: 800;
    font-size: 100px;
    line-height: 1;
    color: var(--accent);
    white-space: nowrap;
}

/* ─── Title ───────────────────────────────────────────────────────────────── */
/*
 * Utility class on the element:  capitalize
 */

.section-404__title {
    font-family: var(--font-plus);
    font-weight: 700;
    font-size: 31px;
    line-height: 1;
    color: var(--black);
}

/* ─── Description ─────────────────────────────────────────────────────────── */

.section-404__desc {
    font-family: var(--font-onest);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--black);
}

/* ─── Buttons container ───────────────────────────────────────────────────── */
/*
 * Utility classes on the element:  d-flex  items-start
 * No additional CSS needed.
 */

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
/*
 * Utility classes on each button:  d-inline-flex  items-center  justify-center  capitalize  cursor-pointer
 *
 * Parallelogram shape via clip-path.
 * Both buttons share the same polygon so their diagonals align.
 * .btn-404--dark uses margin-left: -20px so the right diagonal of "Home Page"
 * and the left diagonal of "Go Back" coincide — creating a seamless colour transition.
 */
.btn-404 {
    height: 50px;
    padding: 0 35px;
    font-family: var(--font-plus);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
}

.btn-404--yellow {
    background-color: var(--accent);
    color: var(--black);
}

.btn-404--dark {
    background-color: var(--black);
    color: var(--white);
    margin-left: -20px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .section-404 {
        min-height: 844px;
    }

    .section-404__bg-img {
        width: 100%;
        height: 100%;
        top: 0;
        object-fit: cover;
        object-position: center;
    }

    .section-404__content {
        left: 20px;
        right: 20px;
        top: 0;
        bottom: 0;
        transform: none;
        width: auto;
        gap: 10px;
        padding-top: 132px;
        padding-bottom: 80px;
    }

    .section-404__buttons {
        margin-top: auto;
        align-self: center;
    }

    .section-404__number {
        font-size: 80px;
        padding-bottom: 14px;
    }

    .section-404__title {
        font-size: 28px;
    }

    .section-404__desc {
        font-size: 19px;
    }
}