/*
 * 행동 유도(cta) 섹션 — 버튼 역할 색과 좁은 화면의 버튼 쌓기.
 *
 * 색은 템플릿(views/home/sections/cta.php)이 섹션에 넣는 --cta-* 변수다. 값은 섹션 색 구성에서
 * App\Helpers\CtaSection::palette() 가 계산한다 — 테마 색을 바꾸면 버튼도 따라간다.
 * 역할이 없는 옛 버튼(custom)은 이 파일을 쓰지 않는다(views/layouts/main.php 의 .home-hero-cta).
 */

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 1.5rem;
    border: 2px solid transparent;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.cta-btn--primary {
    background-color: var(--cta-primary-bg);
    border-color: var(--cta-primary-bg);
    color: var(--cta-primary-fg);
}

.cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
}

.cta-btn--secondary {
    background-color: transparent;
    border-color: var(--cta-secondary-border);
    color: var(--cta-secondary-fg);
}

.cta-btn--secondary:hover {
    border-color: var(--cta-secondary-fg);
    background-color: color-mix(in srgb, var(--cta-secondary-fg) 8%, transparent);
}

/* 글자 링크: 세 번째 이하의 길. 누르는 높이는 44px 을 지킨다. */
.cta-btn--text {
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    color: var(--cta-link-fg);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.cta-btn--text:hover {
    text-decoration-thickness: 2.5px;
}

.cta-section .cta-btn:focus-visible,
.cta-section .cta-image-button:focus-visible {
    outline: 3px solid var(--cta-title);
    outline-offset: 3px;
}

/* 좁은 화면: 버튼을 세로로 쌓고 폭을 채운다. 주 버튼이 목록 앞에 있으면 위에 온다.
   글자 링크와 이미지 버튼(스토어 배지)은 늘리지 않는다 — 배지는 그림 비율을 바꾸면 안 된다. */
@media (max-width: 639px) {
    /* 줄에 Tailwind items-center 가 붙어 있어 선택자를 두 번 써서 이긴다. */
    .cta-btns.cta-btns {
        flex-direction: column;
        align-items: stretch;
    }

    /* 직접 지정 버튼(.home-hero-cta)도 새 배치 안에서는 역할 버튼처럼 폭을 채운다.
       옛 섹션(사진 배경 · 띠 · 직접 지정 버튼만)은 줄에 cta-btns 가 없어 이 규칙을 받지 않는다. */
    .cta-btns > .cta-btn:not(.cta-btn--text),
    .cta-btns > .home-hero-cta {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    /* 늘리지 않는 둘은 줄 정렬(justify-*)을 따라 가로 자리를 잡는다. */
    .cta-btns > .cta-btn--text,
    .cta-btns > .cta-image-button {
        align-self: center;
    }

    .cta-btns.justify-start > .cta-btn--text,
    .cta-btns.justify-start > .cta-image-button {
        align-self: flex-start;
    }

    .cta-btns.justify-end > .cta-btn--text,
    .cta-btns.justify-end > .cta-image-button {
        align-self: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-btn {
        transition: none;
    }

    .cta-btn--primary:hover {
        transform: none;
    }
}