/* =========================================================================
   Atour — ابزارک المنتور «نمونه کارها»
   رنگ‌ها از متغیرهای قالب (رنگ غالب سایت) می‌آیند؛ ظاهر کارت‌ها و دسته‌ها
   همان صفحه‌ی نمونه کارهاست.
   ====================================================================== */

.atour-pfw { direction: rtl; }
.atour-pfw--right  { --pfw-align: right;  --pfw-flex: flex-start; }
.atour-pfw--center { --pfw-align: center; --pfw-flex: center; }
.atour-pfw--left   { --pfw-align: left;   --pfw-flex: flex-end; }

/* عنوان و زیرعنوان */
.atour-pfw__head { margin: 0 0 28px; text-align: var(--pfw-align, center); }
.atour-pfw__title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--atour-green);
}
.atour-pfw__sub {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--atour-muted);
}

/* دسته‌ها — همان چیپ‌های صفحه‌ی نمونه کارها */
.atour-pfw__filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--pfw-flex, center);
    gap: 10px;
    margin: 0 0 30px;
}
.atour-pfw__chip {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 7px;
    background: var(--atour-mint);
    color: var(--atour-green-dark);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    transition: background .2s ease, color .2s ease;
}
.atour-pfw__chip:hover { background: var(--atour-mint-soft); }
.atour-pfw__chip.is-on,
.atour-pfw__chip.is-on:hover {
    background: var(--atour-green);
    color: var(--atour-on-green);
}

/* شبکه */
.atour-pfw__grid {
    display: grid;
    gap: 24px;
    align-items: stretch;
}
.atour-pfw__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atour-pfw__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atour-pfw__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* کارت — قاب خط‌چین مثل کارت‌های وبلاگ و نمونه کار */
.atour-pfw__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px dashed var(--atour-line);
    border-radius: 16px;
    background: transparent;
    transition: border-color .2s ease;
}
.atour-pfw__card[hidden] { display: none; }
.atour-pfw__card:hover { border-color: var(--atour-green); }

.atour-pfw__media {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 11px;
    overflow: hidden;
    background: var(--atour-mint);
}
.atour-pfw__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.atour-pfw--natural .atour-pfw__media { aspect-ratio: auto; }
.atour-pfw--natural .atour-pfw__media img { height: auto; object-fit: initial; }

.atour-pfw__name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.8;
    text-align: center;
}
.atour-pfw__name a { color: var(--atour-ink); text-decoration: none; }
.atour-pfw__name a:hover { color: var(--atour-green-dark); }

/* دکمه‌ی مشاهده‌ی همه */
.atour-pfw__more { margin-top: 32px; text-align: var(--pfw-align, center); }
.atour-pfw__btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 10px;
    background: var(--atour-green);
    color: var(--atour-on-green);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    text-decoration: none;
    transition: filter .2s ease;
}
.atour-pfw__btn:hover { filter: brightness(.92); color: var(--atour-on-green); }

@media (max-width: 991px) {
    .atour-pfw__grid--3,
    .atour-pfw__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .atour-pfw__grid--2,
    .atour-pfw__grid--3,
    .atour-pfw__grid--4 { grid-template-columns: minmax(0, 1fr); }
    .atour-pfw__title { font-size: 24px; }
    .atour-pfw__filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
    .atour-pfw__chip { white-space: nowrap; }
}

/* اسکرول خودکار تصویر بلند هنگام هاور روی کارت (فقط در حالت برش یکنواخت و دستگاه‌های دارای ماوس) */
.atour-pfw__media img { transition: object-position var(--pf-scroll, 6s) ease-in-out; }
@media (hover: hover) {
    .atour-pfw--crop .atour-pfw__card.has-scroll:hover .atour-pfw__media img { object-position: bottom center; }
}