/* ==========================================================================
   LangGo Careers — Khối kêu gọi ứng tuyển cuối trang
   Tách khỏi about.css vì nhiều trang dùng chung (xem common/ready-cta.blade.php).
   Dùng lại biến :root và thang chữ (--fs-*) khai trong shell.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 9 — Kêu gọi ứng tuyển cuối trang
   -------------------------------------------------------------------------- */
.about-ready {
    position: relative;
    /* Nổi lên trên section quy trình phía trên: .process-commit có z-index 1 nên
       nếu để z-index auto thì dải trắng đó vẽ đè lên phần ảnh trồi lên. */
    z-index: 2;
    padding: 56px 20px 60px;
    font-family: var(--font-shell);

    /* Ảnh nền trồi lên trên mép section bao nhiêu px để đè vào section phía trên */
    --ready-bg-rise: 120px;
}

/* Ảnh nền dùng thẻ <img> thật (không dùng background-image) */
.about-ready__bg {
    position: absolute;
    top: calc(var(--ready-bg-rise) * -1);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    /* overflow đặt ở lớp nền chứ không ở section, nếu không phần trồi lên bị cắt */
    overflow: hidden;
}

/* Hiện FULL ảnh từ mép trên xuống, giữ nguyên tỉ lệ gốc (không object-fit: cover
   vì cover kéo/cắt ảnh cho vừa chiều cao khung). Phần ảnh dài hơn khung thì bị
   overflow của .about-ready__bg cắt; khung dài hơn ảnh thì màu nền đỏ phía dưới lấp. */
.about-ready__bg img {
    display: block;
    width: 100%;
    height: auto;
}

.about-ready__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    /* 1100px làm tiêu đề dài ("Bạn xứng đáng với những phúc lợi tốt nhất") bị
       ngắt xuống 2 dòng ở 1920; nới bằng bề ngang khung chung của site. */
    max-width: 1293px;
    margin-inline: auto;
    text-align: center;
}

.about-ready__title {
    margin: 0 0 14px;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}

.about-ready__sub {
    max-width: 780px;
    margin: 0 auto;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 1);
}

.about-ready__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
}

.about-ready__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 32px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-body);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.about-ready__btn:hover {
    transform: translateY(-2px);
}

.about-ready__btn--gold {
    background: linear-gradient(180deg, #FDDA35 36.06%, #FE9C2B 100%);
    border: 3px solid rgba(255, 255, 255, 1);
    color: rgba(219, 31, 31, 1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.about-ready__btn--gold:hover {
    color: rgba(219, 31, 31, 1);
}

.about-ready__btn--ghost {
    border: 3px solid rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.about-ready__btn--ghost:hover {
    background: #fff;
    color: rgba(219, 31, 31, 1);
}

/* Flex wrap + căn giữa: các ý chỉ xuống dòng ở dấu ngăn cách chứ không cắt
   giữa cụm chữ, và dòng bị đẩy xuống vẫn nằm chính giữa. */
.about-ready__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 4px;
    margin: 28px 0 0;
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 1);
}

/* Mỗi ý là một khối liền mạch, không tự ngắt dòng bên trong */
.ready-note__item { white-space: nowrap; }

/* Dấu | ngăn cách các ý, nhạt hơn chữ cho đỡ gắt */
.about-ready__note .ready-note__sep {
    margin-inline: 6px;
    color: rgba(255, 255, 255, .55);
}

/* Ảnh nền mobile chỉ hiện ở <=767px (khai báo trong media query bên dưới) */
.about-ready__bg-img--mobile { display: none; }

@media (max-width: 991px) {
    .about-ready { padding: 40px 16px 48px; }
    .about-ready__actions { gap: 14px; }
    .about-ready__btn { width: 100%; max-width: 320px; }
}

/* --------------------------------------------------------------------------
   MOBILE (<=767px) — ảnh nền riêng
   Ảnh desktop (1920 rộng, height: auto) co về bề ngang điện thoại chỉ còn cao
   vài trăm px nên hụt đáy khối. Ảnh mobile phủ kín khung bằng object-fit: cover.
   Chưa thả file `ready-bg-mobile.*` thì class .about-ready--has-mobile-bg không
   tồn tại và mọi thứ giữ nguyên như cũ.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Bỏ phần ảnh trồi lên đè vào section phía trên: trên mobile nó chỉ ăn vào
       nội dung của section trên chứ không tạo hiệu ứng nối liền như ở desktop.
       Ảnh bắt đầu đúng từ mép trên khối CTA. */
    .about-ready--has-mobile-bg { --ready-bg-rise: 0px; }

    .about-ready--has-mobile-bg .about-ready__bg-img--desktop { display: none; }

    /* Ảnh nền có sẵn một cung cong trắng ở mép DƯỚI (vốn để nối sang section kế
       tiếp ở bố cục desktop). Trên mobile không cần cung đó: cho ảnh cao hơn
       khung đúng --ready-bg-crop-bottom và neo mép trên, phần đuôi chứa cung
       cong tràn xuống dưới và bị .about-ready__bg (overflow: hidden) cắt.
       Cung cong nông/sâu khác nhau thì chỉnh mỗi biến này. */
    .about-ready--has-mobile-bg { --ready-bg-crop-bottom: 14vw; }

    /* Khối cao hơn = mảng nền đỏ cao hơn: nền bám đúng chiều cao section
       (.about-ready__bg { inset: 0 }) nên nới padding là nới nền. */
    .about-ready { padding: clamp(72px, 22vw, 120px) 16px 88px; }

    .about-ready--has-mobile-bg .about-ready__bg-img--mobile {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: calc(100% + var(--ready-bg-crop-bottom));
        object-fit: cover;
        object-position: center top;
    }
}

/* --------------------------------------------------------------------------
   DẢI THẺ ẢNH DƯỚI CÙNG — 16 nhóm MBTI ở trang Cẩm nang nghề nghiệp
   Chỉ render khi view truyền `readyCards`, các trang khác không ảnh hưởng.
   -------------------------------------------------------------------------- */
.about-ready__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.ready-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* 16 thẻ trên một hàng ở 1920; màn hẹp hơn thì tự xuống hàng */
    flex: 0 0 auto;
    width: 58px;
}

.ready-card__media {
    /* Ảnh là hình nhân vật cắt rời, rộng 33-71px và cao 60-70px khác nhau. Canh
       chân xuống đáy để cả dải đứng trên một đường ngang. */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 78px;
    padding: 7px 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
}

/* Khoá theo CHIỀU CAO chứ không phải bề rộng: contain co theo cạnh dài hơn nên
   ảnh rộng bị thu nhỏ lại, nhìn mỗi ô một cỡ. */
.ready-card__media img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.ready-card__label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, 1);
}

@media (max-width: 991px) {
    .about-ready__cards { gap: 10px; }
    .ready-card { width: 52px; }
    .ready-card__media { height: 70px; }
}