/* ==========================================================================
   Trang "Về trường AWE".

   Chỉ những khối riêng của trang này. Hero, section, .awe-why, .awe-cta và
   toàn bộ token dùng lại của awe.css — nạp thêm file này chỉ ở trang about.
   ========================================================================== */

/* Hero trang trong: tiêu đề ngắn hơn trang chủ nên hạ một nấc, ảnh cao hơn
   để khớp chiều cao cột chữ. */
.awe-hero__text > .awe-eyebrow { margin-bottom: 12px; }
.awe-hero .awe-hero__title { font-size: 56px; }
.awe-hero__media { height: 380px; }
.awe-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* .awe-band (dải nền tint) đã chuyển sang awe.css — trang khoá học dùng chung. */

/* ========================= tầm nhìn & sứ mệnh ========================= */
.awe-pillar {
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-top: 3px solid var(--awe-primary);
    border-radius: var(--awe-radius);
    padding: 24px 24px 26px;
}
.awe-pillar__title {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    color: var(--awe-primary);
}
.awe-pillar__text { font-size: 14.5px; line-height: 1.65; color: rgba(20, 32, 31, .72); margin: 0; }

/* ========================= giá trị cốt lõi ========================= */
.awe-value {
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    padding: 20px 22px 22px;
}
.awe-value__no {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--awe-primary);
    font-variant-numeric: tabular-nums;
}
.awe-value__title { font-weight: 600; font-size: 18px; margin: 9px 0 7px; }
.awe-value__text { font-size: 14px; line-height: 1.6; color: rgba(20, 32, 31, .68); margin: 0; }

/* ========================= quá trình phát triển ========================= */
.awe-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--awe-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.awe-timeline__item { position: relative; padding-top: 34px; }

/* Đường kẻ chạy suốt bốn mốc; mốc đầu bắt đầu từ chấm chứ không thừa ra trái. */
.awe-timeline__item::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    right: calc(var(--awe-gap) * -1);
    height: 2px;
    background: rgba(0, 128, 128, .25);
}
.awe-timeline__item:last-child::before { right: 0; }
.awe-timeline__item::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--awe-primary);
    box-shadow: 0 0 0 4px var(--awe-tint);
}
.awe-timeline__year {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--awe-primary);
    font-variant-numeric: tabular-nums;
}
.awe-timeline__title { font-weight: 700; font-size: 21px; letter-spacing: -.015em; margin: 6px 0 0; }

/* ========================= giảng viên ========================= */
.awe-teacher {
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    overflow: hidden;
}
.awe-teacher__media { aspect-ratio: 4 / 5; background: #efece5; }
.awe-teacher__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.awe-teacher__body { padding: 16px 18px 18px; }
.awe-teacher__name { font-weight: 600; font-size: 18px; margin: 0 0 4px; }
.awe-teacher__role { font-size: 13.5px; color: rgba(20, 32, 31, .6); margin: 0; }

/* ========================= đối tác ========================= */
/* Logo gốc đã là hình tròn trắng đặt trên nền teal rất nhạt (#e7f7f7) — bo tròn
   ảnh để cắt bốn góc đó đi, nếu không sẽ thấy ô vuông lệch màu trên nền tint. */
.awe-partners {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* aspect-ratio đặt trên <li> chứ không trên <img>: img đã có thuộc tính
   width/height của WordPress, và khung vuông phải do phần tử cha quyết định —
   nếu không logo bị kéo thành elip và chữ trong logo bị cắt hai bên. */
.awe-partner {
    margin: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--awe-surface);
}
.awe-partner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================= responsive ========================= */
@media (max-width: 1100px) {
    .awe-hero .awe-hero__title { font-size: 44px; }
    .awe-hero__media { height: 320px; }
    .awe-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .awe-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
    /* Hai hàng hai cột: đường kẻ ngang không còn nối đúng, bỏ đi cho gọn. */
    .awe-timeline__item::before { display: none; }
}

@media (max-width: 860px) {
    .awe-hero .awe-hero__title { font-size: 34px; }
    .awe-hero__media { height: 220px; }
    /* Một cột: mốc xếp dọc, chấm về bên trái và đường kẻ nối dọc xuống mốc sau. */
    .awe-timeline { grid-template-columns: 1fr; row-gap: 0; }
    .awe-timeline__item { padding: 0 0 26px 26px; }
    .awe-timeline__item::before {
        display: block;
        top: 6px;
        bottom: -6px;
        left: 5px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .awe-timeline__item:last-child::before { display: none; }
    .awe-timeline__item::after { top: 2px; width: 12px; height: 12px; }

    .awe-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .awe-teacher__media { aspect-ratio: 3 / 4; }
}