/* ==========================================================================
   arto.lookmy.info — оформление
   Создано 09.09.2026, главная переработана в тот же день

   Подключается последним, после собранного бандла main.*.css, поэтому
   перебивает его правила. Исходников фронтенда (Vue + Sass) в проекте нет,
   они собираются отдельно — поэтому дизайн живёт здесь.

   Главная страница переверстана в home.blade.php на своих классах (arto*),
   старые .banner / .sectionTypeLanding на ней больше не используются.
   Правила для них оставлены ниже на случай других страниц.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Палитра и типографика
   -------------------------------------------------------------------------- */
:root {
    --arto-bg:          #ffffff;
    --arto-bg-soft:     #f6f8fa;
    --arto-bg-tint:     #eef3fb;   /* подложка первого экрана */
    --arto-line:        #e4e8ed;
    --arto-ink:         #16191d;
    --arto-ink-soft:    #5a6570;
    --arto-accent:      #2f6feb;
    --arto-accent-dark: #2457bd;
    --arto-radius:      10px;
    --arto-maxw:        1180px;
    --arto-preview-ratio: 3 / 4;   /* пропорция бокса превью, см. раздел 5 */
}


/* ==========================================================================
   1. ЛОГОТИП
   Не картинка, а текст: <a class="siteLogo"><span>PrintIN</span><span>.site</span></a>
   ========================================================================== */
.siteLogo > span { display: none; }

.siteLogo::after {
    content: "ARTO Look";
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--arto-ink);
}

/* Вариант с картинкой — положите файл в public/assets/img/ и раскомментируйте
.siteLogo {
    display: inline-block; width: 132px; height: 40px;
    background: url("/public/assets/img/arto-logo.svg") left center / contain no-repeat;
}
.siteLogo::after { content: none; }
*/


/* ==========================================================================
   2. ШАПКА И ОБЩИЙ ФОН
   ========================================================================== */
header.topHeader {
    background: var(--arto-bg) !important;
    border-bottom: 1px solid var(--arto-line);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

header.topHeader a,
header.topHeader .titleForMenuText,
header.topHeader .titleForMenuIcon,
header.topHeader button { color: var(--arto-ink) !important; }

header.topHeader a:hover,
header.topHeader a.active {
    color: var(--arto-accent) !important;
    background: transparent !important;
}

body,
.homePage { background: var(--arto-bg) !important; color: var(--arto-ink); }


/* ==========================================================================
   3. ГЛАВНАЯ — ПЕРВЫЙ ЭКРАН
   Две колонки: слева текст и кнопки, справа порядок работы.
   Не на всю высоту окна — обычный блок.
   ========================================================================== */
.artoHero {
    background: var(--arto-bg-tint);
    border-bottom: 1px solid var(--arto-line);
    padding: 72px 20px 76px;
}

.artoHero__inner {
    max-width: var(--arto-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.artoHero__text h1 {
    margin: 0 0 18px;
    font-size: 44px;
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--arto-ink);
}

.artoHero__text p {
    margin: 0 0 30px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--arto-ink-soft);
    max-width: 46em;
}

.artoHero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.artoBtn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--arto-radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}

.artoBtn--primary {
    background: var(--arto-accent);
    border-color: var(--arto-accent);
    color: #fff !important;
}
.artoBtn--primary:hover { background: var(--arto-accent-dark); border-color: var(--arto-accent-dark); }

.artoBtn--ghost {
    background: #fff;
    border-color: var(--arto-line);
    color: var(--arto-ink) !important;
}
.artoBtn--ghost:hover { background: var(--arto-bg-soft); border-color: #cfd6de; }

/* порядок работы */
.artoHero__steps {
    background: #fff;
    border: 1px solid var(--arto-line);
    border-radius: 14px;
    padding: 26px 28px 22px;
}

.artoHero__steps h2 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--arto-ink-soft);
}

.artoHero__steps ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.artoHero__steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--arto-line);
    font-size: 15px;
    line-height: 1.45;
}
.artoHero__steps li:first-child { border-top: 0; padding-top: 0; }

.artoStep__num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--arto-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.artoStep__text { color: var(--arto-ink); }


/* ==========================================================================
   4. ГЛАВНАЯ — ЗАГОЛОВКИ СЕКЦИЙ
   ========================================================================== */
.artoSection__head {
    max-width: var(--arto-maxw);
    margin: 0 auto 28px;
    padding: 0 20px;
}

.artoSection__head h2 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-weight: 700;
}

.artoSection__head p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--arto-ink-soft);
    max-width: 70ch;
}


/* ==========================================================================
   5. ГЛАВНАЯ — ВИТРИНА МАКЕТОВ
   Внутри работает Vue из бандла. Он не задаёт карточкам ширину, а картинкам
   ставит max-width: none — из-за этого превью разной величины и сетка едет.
   Задаём ширину колонок и одинаковую пропорцию карточек.
   ========================================================================== */
.artoTemplates {
    padding: 64px 0 8px;
}

/* Полоса контента ровно та же, что у первого экрана и у заголовка секции:
   1180px содержимого плюс 20px боковых отступов на узких экранах.
   box-sizing здесь именно content-box — как у .artoSection__head, иначе
   полоса окажется на 40px уже и блок уедет внутрь относительно заголовка. */
.artoTemplates #showTemplatesApp {
    max-width: var(--arto-maxw);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: content-box;
}

/* Белая панель каталога. В бандле у неё свои поля (margin: 22.5px 90px) и
   padding 45px, из-за чего она была уже полосы контента: слева не совпадала
   с заголовком «Онлайн редактор изображений», справа — с карточкой
   «Как это работает». Прижимаем к краям полосы, внутренние отступы оставляем
   поменьше. */
.artoTemplates .wraper {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 32px 28px !important;
}

/* сетка карточек */
.artoTemplates ul.menuCTemplateCard {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: flex-start;
}

.artoTemplates ul.menuCTemplateCard > li {
    flex: 0 0 calc(25% - 13.5px);
    max-width: calc(25% - 13.5px);
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;

    /* Собственная рамка у <li> из бандла (1px, скругление 1.5px) — снимаем.
       Рамка карточки рисуется на <a> ниже, со скруглением 10px. Иначе видно
       два контура: внешний прямоугольный и внутренний скруглённый. */
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* width: 100% !important здесь обязателен.
   В собранном бандле есть правило
       #app .showTemplates ul.menuCTemplateCard li a { width: calc(33% - 1.6em) }
   и включается оно только при ширине экрана от 1180px. В прежней вёрстке
   карточкой был сам <a> (три штуки в ряд внутри широкого <li>), у нас карточка —
   это <li>, поэтому ссылка должна занимать его целиком. Из-за id в селекторе
   правило бандла выигрывает по весу, перебить его можно только !important.
   Без этой строки на широких экранах превью сжимается примерно до 42px,
   а на узких выглядит нормально. */
.artoTemplates ul.menuCTemplateCard > li > a {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid var(--arto-line);
    border-radius: var(--arto-radius);
    overflow: hidden;
    background: #fff;
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.artoTemplates ul.menuCTemplateCard > li > a:hover {
    border-color: #c3cede;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
}

/* превью
   В каталоге макеты разных пропорций: визитки горизонтальные (1.43-1.81),
   флаеры вертикальные (до 0.47, то есть 600x1271). Общий бокс поэтому
   вытянут вертикально — иначе вертикальные превью сжимаются в узкую
   полоску и выглядят крошечными.
   --arto-preview-ratio ниже — единственное, что стоит подбирать:
     3 / 4  — как сейчас, компромисс, вертикальные видно хорошо
     1 / 1  — квадрат, меньше пустоты у горизонтальных
     4 / 3  — если в каталоге почти нет вертикальных
*/
.artoTemplates ul.menuCTemplateCard > li > a > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    aspect-ratio: var(--arto-preview-ratio);
    object-fit: contain;
    background: var(--arto-bg-soft);
    padding: 8px;
    box-sizing: border-box;
}

/* подпись под превью */
.artoTemplates ul.menuCTemplateCard > li > a > div {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--arto-line);
}

.artoTemplates ul.menuCTemplateCard > li > a > div span {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: var(--arto-ink-soft);
    /* длинные названия обрезаем двумя строками, чтобы карточки не прыгали */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* фильтры форматов и категорий над сеткой */
.artoTemplates .menuFormats,
.artoTemplates ul[class*="menuFormats"] {
    max-width: 100%;
    box-sizing: border-box;
}


/* ==========================================================================
   6. ГЛАВНАЯ — КАРТОЧКИ О СЕРВИСЕ
   На printin.site это четыре блока в строку с иконками. Здесь — сетка 2x2
   без иконок, с крупными заголовками.
   ========================================================================== */
.artoFeatures {
    padding: 64px 0 72px;
    background: var(--arto-bg-soft);
    border-top: 1px solid var(--arto-line);
    margin-top: 56px;
}

.artoFeatures__grid {
    max-width: var(--arto-maxw);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.artoCard {
    background: #fff;
    border: 1px solid var(--arto-line);
    border-radius: 14px;
    padding: 26px 28px;
}

.artoCard h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--arto-ink);
}

.artoCard p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--arto-ink-soft);
}


/* ==========================================================================
   7. ПОДВАЛ
   ========================================================================== */
footer {
    background: var(--arto-bg) !important;
    color: var(--arto-ink-soft) !important;
    border-top: 1px solid var(--arto-line);
    padding: 28px 20px !important;
    /*
        Обязательно: без border-box отступы прибавляются к ширине блока,
        подвал становится шире окна и появляется горизонтальная прокрутка.
    */
    box-sizing: border-box !important;
    max-width: 100%;
}

footer > div,
footer ul,
footer li {
    box-sizing: border-box;
    max-width: 100%;
}

footer ul.copyright {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

footer a { color: var(--arto-ink-soft) !important; }
footer a:hover { color: var(--arto-accent) !important; }


/* ==========================================================================
   8. АДАПТИВ
   ========================================================================== */
@media (max-width: 1100px) {
    .artoTemplates ul.menuCTemplateCard > li {
        flex: 0 0 calc(33.333% - 12px);
        max-width: calc(33.333% - 12px);
    }
}

@media (max-width: 900px) {
    .artoTemplates ul.menuCTemplateCard > li {
        flex: 0 0 calc(50% - 9px);
        max-width: calc(50% - 9px);
    }
    .artoHero { padding: 48px 20px 52px; }
    .artoHero__inner { grid-template-columns: 1fr; gap: 32px; }
    .artoHero__text h1 { font-size: 32px; }
    .artoFeatures__grid { grid-template-columns: 1fr; }
    .artoTemplates { padding-top: 44px; }
    .artoTemplates .wraper { padding: 24px 18px !important; }
    .artoFeatures { padding: 48px 0 52px; margin-top: 40px; }
    .artoSection__head h2 { font-size: 23px; }
}

@media (max-width: 520px) {
    .artoTemplates ul.menuCTemplateCard > li {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==========================================================================
   9. СТАРЫЕ КЛАССЫ
   На главной больше не используются, но остаются на других страницах,
   которые собраны из бандла.
   ========================================================================== */
.bannerBackground,
.banner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.bannerBackground {
    background-image: none !important;
    background-color: var(--arto-bg-tint) !important;
    min-height: 320px !important;
}

.banner { min-height: 320px !important; padding: 56px 0 60px !important; }
.banner h1, .banner p { color: var(--arto-ink) !important; }

.banner ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }

.banner ul li a {
    display: inline-block; padding: 13px 28px; border-radius: var(--arto-radius);
    font-weight: 600; text-decoration: none !important;
    background: var(--arto-accent) !important; color: #fff !important;
    border: 1px solid var(--arto-accent) !important;
}
.banner ul li:nth-child(2) a {
    background: #fff !important; color: var(--arto-ink) !important;
    border: 1px solid var(--arto-line) !important;
}
.banner ul li a span { color: inherit !important; }

.sectionTypeLanding { background: var(--arto-bg) !important; }
.sectionTypeLanding.descriptionFeatures { background: var(--arto-bg-soft) !important; }
.wraper { background: var(--arto-bg) !important; }

.TPM_button {
    background: var(--arto-accent) !important; color: #fff !important;
    border: 0 !important; border-radius: 6px;
}
.TPM_button:hover { background: var(--arto-accent-dark) !important; }


/* Блок подписки удалён из шаблона, правило на случай других страниц */
#subscription,
section.subscription { display: none !important; }


/* ==========================================================================
   9. ГЛАВНАЯ — СОТРУДНИЧЕСТВО С ТИПОГРАФИЯМИ
   Добавлено 10.09.2026. Разметка — в resources/views/layouts/home.blade.php,
   секция .artoPartners.

   Блок стоит последним перед подвалом и оформлен на цветной подложке:
   он обращается к другой аудитории, чем всё выше, и должен читаться как
   отдельное обращение, а не как ещё один ряд карточек.
   ========================================================================== */

.artoPartners {
    margin-top: 56px;
    padding: 64px 20px 68px;
    background: var(--arto-bg-tint);
    border-top: 1px solid var(--arto-line);
}

.artoPartners .artoSection__head {
    margin-bottom: 32px;
}

.artoPartners .artoSection__head p {
    max-width: 62ch;
}

.artoPartners__grid {
    max-width: var(--arto-maxw);
    margin: 0 auto 36px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    box-sizing: content-box;
}

.artoPartners__card {
    background: var(--arto-bg);
    border: 1px solid var(--arto-line);
    border-radius: var(--arto-radius);
    padding: 24px 22px;
}

.artoPartners__card h3 {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--arto-ink);
}

.artoPartners__card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--arto-ink-soft);
}

/* Обращение с адресом почты: центрируем, чтобы взгляд после трёх карточек
   упирался в единственное действие на блоке. */
.artoPartners__cta {
    max-width: var(--arto-maxw);
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    box-sizing: content-box;
}

.artoPartners__cta p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--arto-ink-soft);
}

.artoPartners__mail {
    display: inline-block;
    padding: 12px 26px;
    border-radius: var(--arto-radius);
    background: var(--arto-accent);
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s ease;
}

.artoPartners__mail:hover {
    background: var(--arto-accent-dark);
}

@media (max-width: 900px) {
    .artoPartners        { padding: 48px 20px 52px; margin-top: 40px; }
    .artoPartners__grid  { grid-template-columns: 1fr; }
}