/* ============================================================
   Business Event - 한인업소록 첫 화면 맨 위
   ------------------------------------------------------------
   왼쪽 둘 · 가운데 큰 하나 · 오른쪽 둘.

   카드 한 장과 제목 줄은 FeatureCards.css 에 있다. 여기 남은 것은
   이 화면의 격자뿐이다.
   ============================================================ */

/* 가운데가 2.4 인 것은 눈대중이 아니다. 사진이 모두 16:9 이므로 칸의
   높이는 폭에서 그대로 따라 나오고, 제목은 두 줄로 묶여 있으므로 높이가
   정해져 있다. 옆 기둥은 칸이 둘이고 가운데는 하나이니, 가운데 폭이 옆의
   두 배보다 조금 넓어야 아래끝이 같은 자리에서 만난다. */
.bizevent {
    display: grid;
    grid-template-columns: 1fr 2.4fr 1fr;
    gap: 14px;
    align-items: stretch;
}

/* space-between: 남는 자리가 생기면 두 칸 사이로 흩어 놓아 아래 칸의
   아래끝이 기둥 바닥에 닿게 한다. 늘려서 채우면 사진 비율이 깨진다. */
.bizevent-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.bizevent-lead { display: flex; }
.bizevent .feat-card { width: 100%; }

/* 옆 기둥의 제목은 조금 작다. */
.bizevent-side .feat-title { font-size: 13.5px; }

/* ---------- 좁은 화면 ----------
   세 기둥이 서기에 좁아지면 두 칸씩 흐른다. 큰 칸이 먼저 오도록 순서를
   돌린다 - 문서에서는 왼쪽 기둥이 먼저 적혀 있다. */
@media (max-width: 991px) {
    .bizevent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bizevent-lead { order: -1; grid-column: 1 / -1; }
    .bizevent-side { display: contents; }
    .bizevent .feat-card.is-lead .feat-title { font-size: 16px; }
}

@media (max-width: 560px) {
    .bizevent { grid-template-columns: 1fr; }
    .bizevent-side .feat-title { font-size: 14px; }
}

/* ---------- 제목 줄 가운데의 분류들 ----------
   왼쪽 Event Corner 와 오른쪽 More... 사이.

   감싸개가 span 이라 style.css 의 '.title-section h1 span' 에 걸렸다. 그 규칙은
   빨간 밑줄과 16px 여백을 주는데, 그 줄은 제목과 More 의 것이지 분류들의 것이
   아니다 - 분류 밑에도 두 번째 빨간 줄이 그어졌다. 여기서 되돌린다. */
.feat-titlebar h1 .evt-cats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-left: 20px;
    min-width: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* ---------- 지금 열려 있는 분류 ----------
   제목 바로 옆. 'EVENT CORNER  생활쇼핑' 처럼 읽히게 앞에 홑화살괄호를 세운다.

   이것도 h1 안의 span 이므로 style.css 의 빨간 밑줄 규칙에 걸린다. 되돌린다 -
   밑줄은 제목의 것이다. */
.feat-titlebar h1 .evt-current {
    display: inline-block;
    margin-left: 12px;
    color: #f44336;
    font-size: 15px;
    font-weight: 700;
    border-bottom: none;
    padding-bottom: 0;
    text-transform: none;
}

.feat-titlebar h1 .evt-current::before {
    content: "›";
    margin-right: 10px;
    color: #c9d1d6;
    font-weight: 400;
}

/* 셋을 한 줄에 세운다.
   
   제목과 More 는 밑줄을 달기 위해 아래쪽에 16px 여백을 두고 있어, 상자의
   가운데끼리 맞추면 글자는 어긋난 채로 남는다. 글자를 맞추려면 글줄(baseline)을
   맞춰야 한다.
   
   분류가 있는 줄에만 건다 - 이 제목 줄은 다른 블록들도 함께 쓰고, 그쪽에서는
   More 가 float 로 오른쪽에 붙는 지금 모습 그대로여야 한다. */
.feat-titlebar h1:has(.evt-cats) {
    display: flex;
    align-items: baseline;
}

.feat-titlebar h1:has(.evt-cats) a.more {
    float: none;
    margin-left: auto;
    white-space: nowrap;
}

/* 글자색은 제목(EVENT CORNER)과 같다. 굵기만 다르다 - 이 줄에서 먼저 읽혀야
   하는 것은 제목이고, 그 차이는 굵기로 충분하다. 색까지 흐리면 분류들이
   눌러 볼 수 있는 것으로 보이지 않았다. */
.feat-titlebar h1 a.evt-cat {
    color: #222222;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.feat-titlebar h1 a.evt-cat:hover {
    color: #f44336;
}

/* 지금 보고 있는 분류. 색만으로 말하지 않고 굵기도 함께 바꾼다. */
.feat-titlebar h1 a.evt-cat.is-on {
    color: #222222;
    font-weight: 700;
}

/* 좁은 화면에서는 뺀다. 열 개가 제목 아래로 두세 줄 흘러내리면 정작 칸들이
   화면 밖으로 밀린다. 모아 보는 화면에 들어가면 거기서 고를 수 있다. */
@media (max-width: 900px) {
    .feat-titlebar h1 .evt-cats { display: none; }
}