/* =========================================================
   PAD Landing Page — Full-Width Layout System
   Standalone CSS for layout_mode='landing' pages.
   Uses existing --tn-* design tokens from app.css.
   ========================================================= */

/* --- Reset & Base --- */
.lp-page {
    min-height: 100vh;
    font-family: var(--tn-font, 'Vazirmatn', Tahoma, sans-serif);
    color: var(--tn-on-surface, #1A1C1E);
    background: var(--tn-surface, #F5F7FA);
    direction: rtl;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
.lp-page *, .lp-page *::before, .lp-page *::after { box-sizing: border-box; }
.lp-page img { max-width: 100%; height: auto; display: block; }
.lp-page a { color: inherit; text-decoration: none; }

/* --- Header --- */
.lp-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--lp-header-bg, #fff);
    box-shadow: var(--tn-s1, 0 1px 3px rgba(0,0,0,.06));
    transition: background .3s, box-shadow .3s;
}
.lp-header--transparent { background: transparent; box-shadow: none; }
.lp-header--transparent.lp-header--scrolled { background: rgba(255,255,255,.97); box-shadow: var(--tn-s1); }
.lp-header--gradient {
    background: linear-gradient(135deg, var(--lp-primary, var(--tn-primary, #1565C0)), var(--lp-accent, #1976D2));
    color: #fff;
}
.lp-header-inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px; height: 64px;
}
.lp-logo { display: flex; align-items: center; gap: 12px; }
.lp-logo img { height: 40px; width: auto; }
.lp-logo-title { font-size: 18px; font-weight: 800; white-space: nowrap; }

/* Navigation */
.lp-nav { display: flex; align-items: center; gap: 4px; }
.lp-nav a {
    padding: 8px 16px; border-radius: var(--tn-r-full, 100px);
    font-size: 14px; font-weight: 600; transition: background .2s, color .2s;
}
.lp-nav a:hover { background: rgba(0,0,0,.06); }
.lp-nav a.active { color: var(--lp-primary, var(--tn-primary, #1565C0)); background: var(--tn-primary-light, #E3F2FD); }
.lp-header--gradient .lp-nav a:hover { background: rgba(255,255,255,.15); }
.lp-header--gradient .lp-nav a.active { background: rgba(255,255,255,.2); color: #fff; }

/* Mobile menu toggle */
.lp-menu-toggle {
    display: none; background: none; border: none; cursor: pointer;
    width: 40px; height: 40px; padding: 8px; color: inherit;
}
.lp-menu-toggle svg { width: 24px; height: 24px; }

/* Mobile drawer */
.lp-drawer-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 200; opacity: 0; transition: opacity .3s;
}
.lp-drawer-overlay.open { display: block; opacity: 1; }
.lp-drawer {
    position: fixed; top: 0; right: 0; width: 280px; height: 100%;
    background: #fff; z-index: 201; transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--tn-s3); padding: 24px;
    display: flex; flex-direction: column; gap: 4px;
}
.lp-drawer.open { transform: translateX(0); }
.lp-drawer a {
    display: block; padding: 12px 16px; font-size: 15px; font-weight: 600;
    border-radius: var(--tn-r-sm, 10px); transition: background .15s;
}
.lp-drawer a:hover { background: var(--tn-surface-dim, #ECEEF2); }
.lp-drawer-close {
    align-self: flex-start; background: none; border: none; cursor: pointer;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; margin-bottom: 12px;
}
.lp-drawer-close:hover { background: var(--tn-surface-dim); }

/* --- Sections --- */
.lp-section {
    width: 100%;
    background-color: var(--lp-section-bg, transparent);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    /* padcore174 — فاصلهٔ عمودیِ افزودهٔ سکشن. صفر ⇒ متغیر ست نمی‌شود ⇒ بدونِ اثر. */
    padding-top: var(--lp-section-space-top, 0);
    padding-bottom: var(--lp-section-space-bottom, 0);
}
.lp-section-inner {
    max-width: 1400px; margin: 0 auto;
}
/* Padding variants */
.lp-section--pad-none   .lp-section-inner { padding: 0 32px; }
.lp-section--pad-narrow .lp-section-inner { padding: 24px 32px; }
.lp-section--pad-normal .lp-section-inner { padding: 48px 32px; }
.lp-section--pad-wide   .lp-section-inner { padding: 80px 32px; }

/* padcore136 — عرضِ سکشن. `boxed` = رفتارِ امروز (همان max-widthِ بالا) و پیش‌فرض،
   پس قاعده‌ای برایش لازم نیست. `full` فقط سقفِ عرض را برمی‌دارد؛ padding افقی از
   واریانتِ pad-* دست‌نخورده می‌ماند تا محتوا به لبهٔ صفحه نچسبد.
   بعد از قواعدِ پایه می‌آید تا با specificityِ بالاتر override کند. */
.lp-section--w-full > .lp-section-inner { max-width: none; }

/* Section title */
.lp-section-title {
    font-size: 24px; font-weight: 800; margin: 0 0 32px;
    color: var(--tn-on-surface, #1A1C1E);
    /* padcore154 — تأکیدِ استاندارد: میلهٔ نارنجی چسبیده به سمتِ راستِ متن (RTL). */
    padding-right: 12px;
    border-right: 4px solid var(--lp-accent, #F57C00);
}

/* padcore154 — عنوانِ تگِ آیتمِ «شبکهٔ محتوا». یک سربرگ برای کلِ آیتم است، نه برای
   تک‌تکِ کارت‌ها؛ پس در هر چهار `display_mode` و در حالتِ `stack_items` یکسان است.
   wrapper فقط وقتی رندر می‌شود که تگی وجود داشته باشد و `hide_label` خاموش باشد. */
.lp-item-titled { display: flex; flex-direction: column; min-width: 0; }
.lp-item-title {
    background: var(--lp-section-bg, #F8FAFC);
    color: var(--tn-on-surface, #1A1C1E);
    font-size: 15px; font-weight: 800; text-align: right;
    padding: 10px 14px; margin: 0;
    border-bottom: 3px solid var(--lp-accent, #F57C00);
    border-radius: var(--tn-r-md, 14px) var(--tn-r-md, 14px) 0 0;
}
.lp-item-titled > .lp-item-title + * { margin-top: 12px; }
/* padcore174 — عنوانِ ستون به آرشیوِ همان تگ لینک می‌شود؛ ظاهر تغییر نکند. */
.lp-item-title-link { color: inherit; text-decoration: none; }
.lp-item-title-link:hover { text-decoration: underline; }
/* padcore174 — کادرِ محتوای شبکه محتوا: ادامهٔ بصریِ عنوانِ ستون. عنوان گوشه‌های
   بالا را گرد می‌کند و این کادر گوشه‌های پایین را؛ نتیجه یک پنلِ پیوسته. */
.lp-item-titled > .lp-item-title + .lp-news-grid {
    margin-top: 0;
    background: var(--tn-surface-card, #fff);
    border: 1px solid var(--tn-outline-light, #E2E8F0);
    border-top: 0;
    border-radius: 0 0 var(--tn-r-md, 14px) var(--tn-r-md, 14px);
    padding: 14px;
    gap: 14px;
}
/* داخلِ کادر کارت‌ها کادرِ جدا نمی‌خواهند؛ فقط با خطِ نازک تفکیک شوند. */
.lp-item-titled > .lp-item-title + .lp-news-grid > .lp-news-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tn-outline-light, #E2E8F0);
}
.lp-item-titled > .lp-item-title + .lp-news-grid > .lp-news-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.lp-item-titled > .lp-item-title + .lp-news-grid > .lp-news-card:hover {
    transform: none;
    box-shadow: none;
}

/* Layout variants — multi-column sections in site mode (T-PAD-108).
   `lp-column` wrappers placed by landing-page.php hold items per column.
   `min-width: 0` on columns prevents wide content (images, code) from
   expanding the column past its grid track. */
.lp-section--2-col-equal      > .lp-section-inner,
.lp-section--2-col-wide-left  > .lp-section-inner,
.lp-section--2-col-wide-right > .lp-section-inner,
.lp-section--2-col-3to1       > .lp-section-inner,
.lp-section--2-col-1to3       > .lp-section-inner,
.lp-section--3-col-equal      > .lp-section-inner,
.lp-section--3-col-center-wide > .lp-section-inner,
.lp-section--sidebar-right    > .lp-section-inner,
.lp-section--sidebar-left     > .lp-section-inner { display: grid; gap: 32px; }

.lp-section--2-col-equal      > .lp-section-inner { grid-template-columns: 1fr 1fr; }
.lp-section--2-col-wide-left  > .lp-section-inner { grid-template-columns: 2fr 1fr; }
.lp-section--2-col-wide-right > .lp-section-inner { grid-template-columns: 1fr 2fr; }
.lp-section--2-col-3to1       > .lp-section-inner { grid-template-columns: 3fr 1fr; }
.lp-section--2-col-1to3       > .lp-section-inner { grid-template-columns: 1fr 3fr; }
.lp-section--3-col-equal      > .lp-section-inner { grid-template-columns: 1fr 1fr 1fr; }
.lp-section--3-col-center-wide > .lp-section-inner { grid-template-columns: 1fr 2fr 1fr; }
.lp-section--sidebar-right    > .lp-section-inner { grid-template-columns: 1fr 340px; }
.lp-section--sidebar-left     > .lp-section-inner { grid-template-columns: 340px 1fr; }

/* Legacy aliases — migration 080 renames stored values, but caches/exports
   from older versions may still emit these. Render them like `equal`. */
.lp-section--2-col > .lp-section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.lp-section--3-col > .lp-section-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }

/* Column wrapper inside a multi-column section. The section title (if any)
   sits outside `.lp-column` and the columns themselves stack their items. */
.lp-column { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* The renderer wraps each tab's columns inside `.lp-tab-content`, which sits
   between the section's grid container (`.lp-section-inner`) and the columns.
   That extra wrapper would normally consume a single grid cell and collapse
   the columns into one. `display: contents` makes the wrapper transparent to
   layout so the columns participate directly in the section grid. The
   padcore154 — گیت روی `.active` است (همان کلاسی که page/show می‌زنند)؛ پیش‌تر
   `:not(.hidden)` بود و چون هیچ‌جا `hidden` زده نمی‌شد، تب‌های غیرفعال هم
   `display:contents` می‌گرفتند و ستون‌ها/عنوان را به‌هم می‌ریختند. فقط در
   سکشن‌های چندستونه؛ در `full` این wrapper رفتارِ عادی دارد. */
.lp-section--2-col-equal      .lp-tab-content.active,
.lp-section--2-col-wide-left  .lp-tab-content.active,
.lp-section--2-col-wide-right .lp-tab-content.active,
.lp-section--2-col-3to1       .lp-tab-content.active,
.lp-section--2-col-1to3       .lp-tab-content.active,
.lp-section--3-col-equal      .lp-tab-content.active,
.lp-section--3-col-center-wide .lp-tab-content.active,
.lp-section--sidebar-right    .lp-tab-content.active,
.lp-section--sidebar-left     .lp-tab-content.active { display: contents; }

/* Section title and tab strip must span the full grid width in multi-column
   sections — otherwise they would occupy only the first column. */
.lp-section--2-col-equal      > .lp-section-inner > .lp-section-title,
.lp-section--2-col-wide-left  > .lp-section-inner > .lp-section-title,
.lp-section--2-col-wide-right > .lp-section-inner > .lp-section-title,
.lp-section--2-col-3to1       > .lp-section-inner > .lp-section-title,
.lp-section--2-col-1to3       > .lp-section-inner > .lp-section-title,
.lp-section--3-col-equal      > .lp-section-inner > .lp-section-title,
.lp-section--3-col-center-wide > .lp-section-inner > .lp-section-title,
.lp-section--2-col-equal      > .lp-section-inner > .lp-tabs,
.lp-section--2-col-wide-left  > .lp-section-inner > .lp-tabs,
.lp-section--2-col-wide-right > .lp-section-inner > .lp-tabs,
.lp-section--2-col-3to1       > .lp-section-inner > .lp-tabs,
.lp-section--2-col-1to3       > .lp-section-inner > .lp-tabs,
.lp-section--3-col-equal      > .lp-section-inner > .lp-tabs,
.lp-section--3-col-center-wide > .lp-section-inner > .lp-tabs,
.lp-section--sidebar-right    > .lp-section-inner > .lp-section-title,
.lp-section--sidebar-left     > .lp-section-inner > .lp-section-title,
.lp-section--sidebar-right    > .lp-section-inner > .lp-tabs,
.lp-section--sidebar-left     > .lp-section-inner > .lp-tabs { grid-column: 1 / -1; }

/* --- Hero Block --- */
.lp-hero {
    position: relative; width: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff;
}
.lp-hero--large  { min-height: 80vh; }
.lp-hero--medium { min-height: 50vh; }
.lp-hero--small  { min-height: 35vh; }
.lp-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
}
.lp-hero-bg video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.lp-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 100%);
}
.lp-hero-content {
    position: relative; z-index: 2;
    max-width: 800px; padding: 48px 32px;
}
.lp-hero-title {
    font-size: 42px; font-weight: 900; line-height: 1.3;
    margin: 0 0 16px; text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.lp-hero-subtitle {
    font-size: 18px; font-weight: 400; line-height: 1.8;
    margin: 0 0 32px; opacity: .9;
}
.lp-hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; border-radius: var(--tn-r-full, 100px);
    font-size: 15px; font-weight: 700; transition: all .2s; cursor: pointer; border: none;
}
.lp-hero-btn--primary {
    background: var(--lp-primary, var(--tn-primary, #1565C0)); color: #fff;
}
.lp-hero-btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.lp-hero-btn--outline {
    background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6);
}
.lp-hero-btn--outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* --- News Grid Block --- */
.lp-news-grid {
    display: grid; gap: 24px;
}
.lp-news-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lp-news-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-news-grid--4 { grid-template-columns: repeat(4, 1fr); }

.lp-news-card {
    background: var(--tn-surface-card, #fff);
    border-radius: var(--tn-r-md, 14px);
    overflow: hidden; transition: transform .2s, box-shadow .2s;
    box-shadow: var(--tn-s1);
    display: flex; flex-direction: column;
}
.lp-news-card:hover { transform: translateY(-4px); box-shadow: var(--tn-s2); }
.lp-news-card-img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
    background: var(--tn-surface-dim, #ECEEF2);
}
.lp-news-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.lp-news-card-title {
    font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-news-card-excerpt {
    font-size: 13px; color: var(--tn-on-surface-var, #6B7280); line-height: 1.8;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1;
}
.lp-news-card-meta {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
    font-size: 12px; color: var(--tn-on-surface-var, #6B7280);
}
/* padcore145 — تاریخِ انتشارِ کارت. پیش‌فرضِ خنثی و کم‌رنگ؛ قالبِ سفارشی با همین
   کلاس هر طرحی می‌دهد. آیتمِ بی‌تاریخ اصلاً این تگ را ندارد. */
.lp-news-card-date {
    display: block; margin-top: 6px;
    font-size: 12px; color: var(--tn-on-surface-faint, #9AA0A6);
}
.lp-news-card--overlay .lp-news-card-date { color: rgba(255,255,255,.7); }
/* Overlay card style */
.lp-news-card--overlay {
    position: relative; aspect-ratio: 16/10; overflow: hidden;
    display: flex; align-items: flex-end;
}
.lp-news-card--overlay .lp-news-card-img { position: absolute; inset: 0; height: 100%; }
.lp-news-card--overlay .lp-news-card-body {
    position: relative; z-index: 1; color: #fff; padding: 24px;
    background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 100%);
    width: 100%;
}
.lp-news-card--overlay .lp-news-card-excerpt { color: rgba(255,255,255,.8); }
.lp-news-card--overlay .lp-news-card-meta { color: rgba(255,255,255,.7); }
/* Minimal card style — no image, compact layout, text-only (BUG-060) */
.lp-news-card--minimal { box-shadow: none; border: 1px solid var(--tn-outline, #DDE1E6); border-radius: var(--tn-r-sm, 10px); }
.lp-news-card--minimal:hover { box-shadow: var(--tn-s1); background: var(--tn-surface-dim, #ECEEF2); }
.lp-news-card--minimal .lp-news-card-img { display: none; }
.lp-news-card--minimal .lp-news-card-body { padding: 16px; }
.lp-news-card--minimal .lp-news-card-title { font-size: 14px; font-weight: 700; }
.lp-news-card--minimal .lp-news-card-meta { margin-top: 8px; }

/* --- Cover card (image + gradient overlay title) --- */
.lp-news-card--cover {
    position: relative; overflow: hidden;
    aspect-ratio: 4/3;
    display: block;
}
.lp-news-card--cover .lp-news-card-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .4s ease;
    aspect-ratio: unset;
}
.lp-news-card--cover:hover .lp-news-card-img { transform: scale(1.04); }
.lp-news-card--cover-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 48px 18px 18px;
    background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 55%, transparent 100%);
    z-index: 1;
}
.lp-news-card--cover-title {
    color: #fff; font-size: 15px; font-weight: 700; line-height: 1.6;
    margin: 0;
    /* no line-clamp — full title visible */
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.lp-news-card--cover-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
}
/* Text-only card (no image) */
.lp-news-card--text {
    position: relative;
    border-right: 4px solid var(--tn-primary, #1565C0);
}
.lp-news-card--text .lp-news-card-body {
    justify-content: center;
}
.lp-news-card--text .lp-news-card-title {
    font-size: 15px; line-height: 1.7; font-weight: 700;
    display: block; overflow: visible; -webkit-line-clamp: unset;
}

/* --- Text Block --- */
.lp-text-block {
    font-size: 15px; line-height: 1.9; color: var(--tn-on-surface, #1A1C1E);
}
.lp-text-block h1, .lp-text-block h2, .lp-text-block h3 {
    font-weight: 800; line-height: 1.5; margin: 24px 0 12px;
}
.lp-text-block h1 { font-size: 28px; }
.lp-text-block h2 { font-size: 22px; }
.lp-text-block h3 { font-size: 18px; }
.lp-text-block p { margin: 0 0 16px; }
.lp-text-block img { border-radius: var(--tn-r-md, 14px); margin: 16px 0; }
.lp-text-block ul, .lp-text-block ol { padding-right: 24px; margin: 0 0 16px; }
.lp-text-block blockquote {
    border-right: 4px solid var(--lp-primary, var(--tn-primary, #1565C0));
    padding: 12px 20px; margin: 16px 0;
    background: var(--tn-primary-light, #E3F2FD); border-radius: 0 var(--tn-r-sm, 10px) var(--tn-r-sm, 10px) 0;
}

/* --- CTA Block --- */
.lp-cta {
    text-align: center; padding: 64px 32px;
    border-radius: var(--tn-r-lg, 20px);
    background: var(--lp-cta-bg, var(--lp-primary, var(--tn-primary, #1565C0)));
    color: var(--lp-cta-color, #fff);
}
.lp-cta-title { font-size: 28px; font-weight: 900; margin: 0 0 12px; }
.lp-cta-text { font-size: 16px; margin: 0 0 28px; opacity: .9; max-width: 600px; margin-inline: auto; line-height: 1.8; }
.lp-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-cta-btn {
    display: inline-flex; align-items: center; padding: 14px 32px;
    border-radius: var(--tn-r-full, 100px); font-size: 15px; font-weight: 700;
    background: #fff; color: var(--lp-primary, var(--tn-primary, #1565C0));
    transition: all .2s; cursor: pointer; border: none;
}
.lp-cta-btn:hover { transform: translateY(-2px); box-shadow: var(--tn-s2); }

/* --- Spacer Block --- */
.lp-spacer { width: 100%; }
.lp-spacer--sm { height: 24px; }
.lp-spacer--md { height: 48px; }
.lp-spacer--lg { height: 80px; }
.lp-spacer--line {
    height: 1px; background: var(--tn-outline, #DDE1E6);
    max-width: 1400px; margin: 32px auto;
}

/* --- Gallery Block --- */
.lp-gallery {
    display: grid; gap: 12px;
}
.lp-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.lp-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.lp-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.lp-gallery-item {
    border-radius: var(--tn-r-md, 14px); overflow: hidden;
    cursor: pointer; position: relative;
}
.lp-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s; }
.lp-gallery-item:hover img { transform: scale(1.05); }
.lp-gallery-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px 16px; font-size: 13px; font-weight: 600; color: #fff;
    background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 100%);
    opacity: 0; transition: opacity .3s;
}
.lp-gallery-item:hover .lp-gallery-caption { opacity: 1; }

/* --- Team Block --- */
.lp-team { display: grid; gap: 24px; }
.lp-team--3 { grid-template-columns: repeat(3, 1fr); }
.lp-team--4 { grid-template-columns: repeat(4, 1fr); }
.lp-team-card {
    text-align: center; padding: 32px 20px;
    background: var(--tn-surface-card, #fff); border-radius: var(--tn-r-md, 14px);
    box-shadow: var(--tn-s1); transition: transform .2s, box-shadow .2s;
}
.lp-team-card:hover { transform: translateY(-4px); box-shadow: var(--tn-s2); }
.lp-team-photo {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 16px; border: 3px solid var(--tn-primary-light, #E3F2FD);
}
.lp-team-name { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.lp-team-role { font-size: 13px; color: var(--lp-primary, var(--tn-primary)); font-weight: 600; margin: 0 0 8px; }
.lp-team-bio { font-size: 13px; color: var(--tn-on-surface-var); line-height: 1.7; }
.lp-team-links { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.lp-team-links a {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--tn-surface-dim, #ECEEF2); font-size: 14px; transition: background .2s;
}
.lp-team-links a:hover { background: var(--tn-primary-light); color: var(--tn-primary); }

/* --- Stats Block --- */
.lp-stats {
    display: grid; gap: 24px; text-align: center;
    padding: 48px 32px; border-radius: var(--tn-r-lg, 20px);
}
.lp-stats--3 { grid-template-columns: repeat(3, 1fr); }
.lp-stats--4 { grid-template-columns: repeat(4, 1fr); }
.lp-stat-value {
    font-size: 42px; font-weight: 900; line-height: 1.2;
    color: var(--lp-primary, var(--tn-primary, #1565C0));
}
.lp-stat-label { font-size: 14px; font-weight: 600; color: var(--tn-on-surface-var, #6B7280); margin-top: 4px; }
/* Dark variant */
.lp-stats--dark { background: var(--lp-primary, var(--tn-primary, #1565C0)); color: #fff; }
.lp-stats--dark .lp-stat-value { color: #fff; }
.lp-stats--dark .lp-stat-label { color: rgba(255,255,255,.8); }

/* --- Flow wrapper for non-grid items (hero, text, cta, etc.) --- */
.lp-items-flow { display: flex; flex-direction: column; gap: 24px; }

/* --- Items Grid wrapper (static_card, stable) --- */
.lp-items-grid { display: grid; gap: 24px; }
.lp-items-grid--1 { grid-template-columns: 1fr; }
.lp-items-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lp-items-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-items-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .lp-items-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .lp-items-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .lp-items-grid--2,.lp-items-grid--3,.lp-items-grid--4 { grid-template-columns: 1fr; }
}

/* --- Static Card Block --- */
.lp-static-card {
    background: var(--tn-surface-card, #fff); border-radius: var(--tn-r-md, 14px);
    padding: 28px 20px; box-shadow: var(--tn-s1); transition: transform .2s, box-shadow .2s;
}
.lp-static-card:hover { transform: translateY(-4px); box-shadow: var(--tn-s2); }
.lp-static-card-icon { font-size: 36px; display: block; margin-bottom: 12px; }
.lp-static-card-value { font-size: 36px; font-weight: 900; line-height: 1.2; color: var(--tn-on-surface, #1A1C1E); }
.lp-static-card-label { font-size: 13px; color: var(--tn-on-surface-var, #6B7280); margin-top: 6px; line-height: 1.5; }
.lp-static-card-link { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--lp-primary, var(--tn-primary)); }

/* --- Static Card Buttons Grid (same as app-mode) --- */
.static-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.static-btn-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; background: var(--tn-surface-card,#fff); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,55,123,.06); padding: 16px 12px; text-align: center; transition: box-shadow .15s; }
.static-btn-card:hover { box-shadow: 0 4px 14px rgba(21,101,192,.18); }
.static-btn-card img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; margin-bottom: 10px; }
.static-btn-card--cover img { object-fit: cover; }
.static-btn-card--contain img { object-fit: contain; }
.static-btn-card .sbc-icon-placeholder { width: 56px; height: 56px; border-radius: 12px; margin-bottom: 10px; background: var(--tn-primary-light, color-mix(in srgb, var(--tn-primary) 12%, #fff)); display: flex; align-items: center; justify-content: center; }
.static-btn-card .sbc-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; line-height: 1.5; }
.static-btn-card .sbc-desc { font-size: 12px; color: var(--tn-on-surface-var); line-height: 1.5; }

/* --- Stable Block (service card) --- */
.lp-stable-card {
    background: var(--tn-surface-card, #fff); border-radius: var(--tn-r-md, 14px);
    overflow: hidden; box-shadow: var(--tn-s1); transition: transform .2s, box-shadow .2s;
}
.lp-stable-card:hover { transform: translateY(-4px); box-shadow: var(--tn-s2); }
.lp-stable-img { aspect-ratio: 16/9; overflow: hidden; }
.lp-stable-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.lp-stable-img--cover img { object-fit: cover; }
.lp-stable-img--contain img { object-fit: contain; }
.lp-stable-card:hover .lp-stable-img img { transform: scale(1.05); }
.lp-stable-body { padding: 20px; }
.lp-stable-icon { font-size: 28px; color: var(--lp-primary, var(--tn-primary)); display: block; margin-bottom: 10px; }
.lp-stable-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.lp-stable-text { font-size: 13px; color: var(--tn-on-surface-var, #6B7280); line-height: 1.7; margin: 0 0 12px; }
.lp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--tn-r-full, 100px); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .2s; }
.lp-btn--primary { background: var(--lp-primary, var(--tn-primary)); color: #fff; }
.lp-btn--primary:hover { opacity: .9; }
.lp-btn--outline { border: 1.5px solid var(--lp-primary, var(--tn-primary)); color: var(--lp-primary, var(--tn-primary)); }
.lp-btn--outline:hover { background: var(--tn-primary-light); }

/* --- Slider Block --- */
/* padcore136 — گوشهٔ اسلایدر صاف؛ overflow برای بریدنِ اسلایدها می‌ماند. */
.lp-slider { position: relative; border-radius: 0; overflow: hidden; }
.lp-slider-track { position: relative; width: 100%; }
.lp-slider-slide { display: none; position: relative; }
.lp-slider-slide.active { display: block; }
.lp-slider-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.lp-slider-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    padding: 32px 24px 20px; color: #fff;
}
.lp-slider-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.lp-slider-desc { font-size: 13px; opacity: .85; margin: 0; }
.lp-slider-prev, .lp-slider-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
    border: none; color: #fff; font-size: 28px; width: 44px; height: 44px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; z-index: 2;
}
.lp-slider-prev:hover, .lp-slider-next:hover { background: rgba(255,255,255,.35); }
.lp-slider-prev { right: 12px; }
.lp-slider-next { left: 12px; }
.lp-slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.lp-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: background .2s, width .2s; }
.lp-slider-dot.active { background: #fff; width: 20px; border-radius: 4px; }

/* --- Footer --- */
.lp-footer {
    background: var(--lp-footer-bg, #1a1c1e); color: rgba(255,255,255,.85);
    padding: 64px 32px 32px;
}
.lp-footer-inner {
    max-width: 1400px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px;
}
.lp-footer-col-title {
    font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 16px;
    padding-bottom: 8px; border-bottom: 2px solid var(--lp-primary, var(--tn-primary, #1565C0));
    display: inline-block;
}
.lp-footer-links { list-style: none; padding: 0; margin: 0; }
.lp-footer-links li { margin-bottom: 8px; }
.lp-footer-links a { font-size: 14px; opacity: .75; transition: opacity .2s; }
.lp-footer-links a:hover { opacity: 1; }
.lp-footer-text { font-size: 14px; line-height: 1.8; }
.lp-footer-copyright {
    max-width: 1400px; margin: 40px auto 0;
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
    font-size: 13px; text-align: center; opacity: .6;
}

/* Language switcher (ADR-PADCORE-0012) — یک کامپوننت، دو جایگاه: فوتر و هدر.
   قواعدِ پایه مشترک‌اند؛ تفاوتِ هر جایگاه فقط در چند خطِ scoped زیر است. */
.lp-lang-switcher {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 4px;
}
.lp-lang-switcher a,
.lp-lang-current,
.lp-lang-disabled {
    display: inline-block; padding: 4px 10px; border-radius: var(--tn-r-full, 100px);
    font-size: 13px; font-weight: 600; transition: background .2s, opacity .2s;
}
.lp-lang-switcher a { opacity: .75; }
.lp-lang-switcher a:hover { opacity: 1; background: rgba(0,0,0,.06); }
.lp-lang-current { opacity: 1; background: rgba(0,0,0,.08); }
.lp-lang-disabled { opacity: .35; cursor: default; }

/* در هدر کنارِ آیتم‌های منو می‌نشیند. */
.lp-nav .lp-lang-switcher { margin-inline-start: 8px; }
.lp-header--gradient .lp-lang-switcher a:hover,
.lp-header--gradient .lp-lang-current { background: rgba(255,255,255,.2); color: #fff; }

/* در فوتر (زمینهٔ تیره) کنتراست معکوس است. */
.lp-footer .lp-lang-switcher { justify-content: center; margin-top: 24px; }
.lp-footer .lp-lang-switcher a:hover,
.lp-footer .lp-lang-current { background: rgba(255,255,255,.15); }

/* در drawerِ موبایل عمودی و هم‌ترازِ لینک‌های منو. */
.lp-drawer .lp-lang-switcher { margin-top: 16px; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .lp-section--3-col > .lp-section-inner,
    .lp-section--3-col-equal > .lp-section-inner,
    .lp-section--3-col-center-wide > .lp-section-inner { grid-template-columns: 1fr 1fr; }
    .lp-news-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .lp-team--4 { grid-template-columns: repeat(2, 1fr); }
    .lp-stats--4 { grid-template-columns: repeat(2, 1fr); }
    .lp-gallery--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .lp-header-inner { padding: 0 16px; }
    .lp-nav { display: none; }
    .lp-menu-toggle { display: flex; align-items: center; justify-content: center; }

    .lp-section--2-col > .lp-section-inner,
    .lp-section--3-col > .lp-section-inner,
    .lp-section--2-col-equal > .lp-section-inner,
    .lp-section--2-col-wide-left > .lp-section-inner,
    .lp-section--2-col-wide-right > .lp-section-inner,
    .lp-section--2-col-3to1 > .lp-section-inner,
    .lp-section--2-col-1to3 > .lp-section-inner,
    .lp-section--3-col-equal > .lp-section-inner,
    .lp-section--3-col-center-wide > .lp-section-inner,
    .lp-section--sidebar-right > .lp-section-inner,
    .lp-section--sidebar-left > .lp-section-inner {
        grid-template-columns: 1fr !important;
    }

    .lp-section--pad-none   .lp-section-inner { padding: 0 16px; }
    .lp-section--pad-narrow .lp-section-inner { padding: 16px; }
    .lp-section--pad-normal .lp-section-inner { padding: 32px 16px; }
    .lp-section--pad-wide   .lp-section-inner { padding: 48px 16px; }

    .lp-hero-title { font-size: 28px; }
    .lp-hero-subtitle { font-size: 15px; }
    .lp-hero-content { padding: 32px 16px; }

    .lp-news-grid--2, .lp-news-grid--3, .lp-news-grid--4 { grid-template-columns: 1fr; }
    .lp-team--3, .lp-team--4 { grid-template-columns: 1fr 1fr; }
    .lp-stats--3, .lp-stats--4 { grid-template-columns: 1fr 1fr; }
    .lp-gallery--3, .lp-gallery--4 { grid-template-columns: 1fr 1fr; }

    .lp-cta { padding: 40px 20px; }
    .lp-cta-title { font-size: 22px; }

    .lp-footer-inner { grid-template-columns: 1fr; }
    .lp-section-title { font-size: 20px; }
    .lp-stat-value { font-size: 32px; }
}

@media (max-width: 480px) {
    .lp-team--3, .lp-team--4 { grid-template-columns: 1fr; }
    .lp-stats--3, .lp-stats--4 { grid-template-columns: 1fr; }
    .lp-gallery--2, .lp-gallery--3, .lp-gallery--4 { grid-template-columns: 1fr; }
    .lp-hero--large { min-height: 60vh; }
    .lp-hero-btn { padding: 12px 24px; font-size: 14px; }
}

/* --- Lightbox (gallery click-to-zoom) --- */
.lp-lightbox {
    position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.92);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
    padding: 16px;
}
.lp-lightbox.open { opacity: 1; visibility: visible; }
/* Main image */
.lp-lightbox-img-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    width: 100%; position: relative; min-height: 0;
}
.lp-lightbox-img-wrap img {
    max-width: 90vw; max-height: 80vh;
    border-radius: var(--tn-r-sm); object-fit: contain;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    transition: opacity .2s;
}
/* Thumbnails strip */
.lp-lightbox-thumbs {
    display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap;
    overflow-x: auto; padding: 12px 16px 4px;
    max-width: 90vw; scrollbar-width: thin;
}
.lp-lightbox-thumb {
    flex-shrink: 0; width: 60px; height: 60px;
    border-radius: 8px; overflow: hidden; cursor: pointer;
    border: 3px solid transparent; transition: border-color .15s, opacity .15s;
    opacity: .55;
}
.lp-lightbox-thumb.active { border-color: #fff; opacity: 1; }
.lp-lightbox-thumb:hover { opacity: .85; }
.lp-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Nav arrows */
.lp-lightbox-prev, .lp-lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.18); border: none; color: #fff;
    font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s; z-index: 2; user-select: none;
}
.lp-lightbox-prev { right: 8px; }
.lp-lightbox-next { left: 8px; }
.lp-lightbox-prev:hover, .lp-lightbox-next:hover { background: rgba(255,255,255,.32); }
.lp-lightbox-prev.hidden, .lp-lightbox-next.hidden { display: none; }
/* Close */
.lp-lightbox-close {
    position: absolute; top: 14px; left: 14px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.15); border: none; color: #fff;
    font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 3; transition: background .15s;
}
.lp-lightbox-close:hover { background: rgba(255,255,255,.3); }
/* Counter */
.lp-lightbox-counter {
    position: absolute; top: 18px; right: 50%; transform: translateX(50%);
    color: rgba(255,255,255,.7); font-size: 13px; z-index: 3;
}

/* --- Gallery in article body (pad-gallery class inserted by editor) --- */
/* چیدمانِ ردیفیِ justified: تصویرها کامل و بدونِ کراپ، با ارتفاعِ برابر در هر ردیف.
   ارتفاعِ پایه روی <a> ست می‌شود و عرض از نسبتِ خودِ تصویر می‌آید (width:auto)؛
   flex-grow باعث می‌شود ردیف تا لبه پر شود و ارتفاع در ردیف برابر بماند. */
.pad-gallery {
    --pg-h: 110px;              /* ارتفاعِ پایهٔ ردیف — بند‌انگشتی (پیش‌فرضِ گالری‌های قدیمی) */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
    align-items: flex-start;
}
.pad-gallery--thumb  { --pg-h: 110px; }
.pad-gallery--medium { --pg-h: 220px; }

.pad-gallery a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    height: var(--pg-h);
    flex: 1 1 auto;
    max-width: 100%;
    line-height: 0;
}
.pad-gallery a img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;        /* کاملِ تصویر — بدونِ کراپ */
    transition: transform .3s;
}
.pad-gallery a:hover img { transform: scale(1.06); }

@media (max-width: 640px) {
    .pad-gallery              { --pg-h: 84px; gap: 6px; }
    .pad-gallery--thumb       { --pg-h: 84px; }
    .pad-gallery--medium      { --pg-h: 150px; }
}

/* --- Utility --- */
.lp-container { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .lp-container { padding: 0 16px; } }

/* ═══ PAD Slider — mirrored from app.css for parity in site mode ═══ */
.page-slider-wrap { margin-bottom:20px; }
.pad-slider {
    position:relative; overflow:hidden;
    border-radius:0; /* padcore136 — گوشهٔ صاف */
    box-shadow:0 4px 24px rgba(0,0,0,.12);
    background:#1a1a2e;
}
.pad-slider-track {
    display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1);
    direction:ltr;
}
.pad-slide {
    min-width:100%; position:relative;
    display:block; text-decoration:none; color:inherit;
    aspect-ratio:16/7; overflow:hidden;
}
.pad-slide img, .pad-slide video {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform 6s ease-out;
}
.pad-slider--cover .pad-slide img, .pad-slider--cover .pad-slide video { object-fit:cover; }
.pad-slider--contain .pad-slide img, .pad-slider--contain .pad-slide video { object-fit:contain; }
.pad-slide.active img { transform:scale(1.04); }
.pad-slide video { transform:none!important; }
/* BUG-LU-02 + BUG-227 — RTL + center for no-image slide title; reserve space for dots so title doesn't overlap */
.pad-slide-no-img {
    min-width:100%; position:relative;
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:16/7; overflow:hidden;
    background:linear-gradient(135deg, var(--tn-primary, #1565C0) 0%, var(--tn-primary-dark, #0D47A1) 100%);
    text-decoration:none; color:#fff; font-size:18px; font-weight:700;
    padding:24px 24px 56px;
    direction:rtl; text-align:center;
}
/* BUG-LU-03 + BUG-228 — bottom padding ≥48px (dots: 10px+18px+gap) so the title never overlaps dots.
   padcore166 — عنوانِ اسلاید: بزرگ، بولد، کامل (بدونِ line-clamp)؛ گرادیانتِ نارنجیِ کدر
   برای کنتراستِ ثابت روی عکسِ روشن یا تاریک. پایهٔ رنگ = توکنِ موجودِ --tn-warn (#B26C09). */
.pad-slide-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:none;
    padding:24px 24px 56px; direction:rtl;
}
.pad-slide-title {
    display:inline; color:#fff; font-size:clamp(22px, 2.6vw, 34px); font-weight:800;
    line-height:1.9;
    background:rgba(138,82,7,.92);
    box-decoration-break:clone; -webkit-box-decoration-break:clone;
    padding:.18em .45em; border-radius:6px;
}
.pad-slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.85); border:none;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    z-index:3; transition:all .2s;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    opacity:0;
}
.pad-slider:hover .pad-slider-arrow { opacity:1; }
.pad-slider-arrow:hover { background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.2); transform:translateY(-50%) scale(1.08); }
.pad-slider-arrow:active { transform:translateY(-50%) scale(.95); }
.pad-slider-arrow.arr-next { left:10px; }
.pad-slider-arrow.arr-prev { right:10px; }
.pad-slider-arrow svg { width:18px; height:18px; color:#333; }
.pad-slider-dots {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; gap:6px; z-index:3;
    background:rgba(0,0,0,.25); padding:5px 10px;
    border-radius:12px; backdrop-filter:blur(4px);
}
.pad-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.45); cursor:pointer;
    transition:all .25s; border:none;
}
.pad-dot:hover { background:rgba(255,255,255,.7); }
.pad-dot.active { background:#fff; width:22px; border-radius:4px; }

/* padcore128 — مرزِ بالا/پایینِ لندینگ.
   app.css روی `body.app-mode-site .site-main` عمودی padding:32px…48px می‌گذارد که در لندینگ
   زیرِ هدر و بالای فوتر فاصلهٔ خالیِ متقارن باز می‌کند. اینجا فقط برای لندینگ (کلاسِ lp-landing
   روی body) عمودی صفر می‌شود؛ paddingِ افقی و بقیهٔ صفحاتِ سایت دست‌نخورده می‌مانند. */
body.app-mode-site.lp-landing .site-main { padding-top:0; padding-bottom:0; }
@media (max-width:640px) {
    body.app-mode-site.lp-landing .site-main { padding-top:0; padding-bottom:0; }
}

/* padcore129 — آیتم‌های لندینگ کاملاً مماس.
   فاصلهٔ عمودی از سه جا می‌آمد: paddingِ عمودیِ .lp-section-inner (هر چهار واریانتِ pad-*)،
   gapِ .lp-items-flow، و paddingِ .site-main (که در padcore128 صفر شد).
   paddingِ افقی (32px دسکتاپ / 16px موبایل) عمداً دست‌نخورده می‌ماند.
   فاصلهٔ دلخواه فقط از دو فیلدِ عددیِ خودِ آیتم می‌آید (--lp-space-top/--lp-space-bottom). */
.lp-section--pad-none   .lp-section-inner,
.lp-section--pad-narrow .lp-section-inner,
.lp-section--pad-normal .lp-section-inner,
.lp-section--pad-wide   .lp-section-inner { padding-top: 0; padding-bottom: 0; }

.lp-items-flow { gap: 0; }

/* فاصلهٔ افزایشیِ هر آیتم — پیش‌فرض صفر، فقط وقتی ادمین عدد داده باشد wrapper رندر می‌شود. */
.lp-item-space { padding-top: var(--lp-space-top, 0); padding-bottom: var(--lp-space-bottom, 0); }

/* padcore143 — سه گزینهٔ نمایشِ آیتم. wrapper فقط وقتی رندر می‌شود که کلیدی در config باشد،
   پس آیتم‌های امروز هیچ‌کدام از این قواعد را نمی‌گیرند. */
.lp-item-disp { display: contents; }

/* نمایشِ تصویر — برای انواعی که خودشان img_mode را مصرف نمی‌کنند. */
.lp-item-disp[data-img-mode="cover"]   img { object-fit: cover; }
.lp-item-disp[data-img-mode="contain"] img { object-fit: contain; }

/* جای عنوان نسبت به تصویر. کارت باید مرجعِ position شود تا «روی تصویر» جا بیفتد.
   padcore147 (ب) — سلکتورهای padcore143 (`lp-cn-*`, `lp-card*`, `lp-stable-item`) هیچ
   تولیدکننده‌ای در خروجی ندارند؛ کلاس‌های واقعیِ `_item.blade.php` در کنارشان اضافه شد.
   قدیمی‌ها عمداً نگه داشته شدند تا قالبِ سفارشیِ احتمالیِ کاربران نشکند. */
.lp-item-disp[data-title-pos] .lp-card,
.lp-item-disp[data-title-pos] .lp-stable-item,
.lp-item-disp[data-title-pos] .lp-cn-card,
.lp-item-disp[data-title-pos] .lp-stable-card,
.lp-item-disp[data-title-pos] .lp-news-card,
.lp-item-disp[data-title-pos] .static-btn-card { display: flex; flex-direction: column; position: relative; }

.lp-item-disp[data-title-pos="above"] .lp-card-title,
.lp-item-disp[data-title-pos="above"] .lp-stable-title,
.lp-item-disp[data-title-pos="above"] .lp-cn-title,
.lp-item-disp[data-title-pos="above"] .lp-news-card-title,
.lp-item-disp[data-title-pos="above"] .lp-news-card--imgtop-title,
.lp-item-disp[data-title-pos="above"] .lp-news-card--cover-title,
.lp-item-disp[data-title-pos="above"] .sbc-title { order: -1; }

.lp-item-disp[data-title-pos="below"] .lp-card-title,
.lp-item-disp[data-title-pos="below"] .lp-stable-title,
.lp-item-disp[data-title-pos="below"] .lp-cn-title,
.lp-item-disp[data-title-pos="below"] .lp-news-card-title,
.lp-item-disp[data-title-pos="below"] .lp-news-card--imgtop-title,
.lp-item-disp[data-title-pos="below"] .lp-news-card--cover-title,
.lp-item-disp[data-title-pos="below"] .sbc-title { order: 1; }

.lp-item-disp[data-title-pos="over"] .lp-card-title,
.lp-item-disp[data-title-pos="over"] .lp-stable-title,
.lp-item-disp[data-title-pos="over"] .lp-cn-title,
.lp-item-disp[data-title-pos="over"] .lp-news-card-title,
.lp-item-disp[data-title-pos="over"] .lp-news-card--imgtop-title,
.lp-item-disp[data-title-pos="over"] .lp-news-card--cover-title,
.lp-item-disp[data-title-pos="over"] .sbc-title {
    position: absolute; inset-block-end: 0; inset-inline: 0; margin: 0;
    padding: 8px 12px; background: rgba(0, 0, 0, .55); color: #fff;
}

/* اندازهٔ کارت — کلِ کارت با هم مقیاس می‌گیرد: عرضِ ستونِ گرید، پدینگ، کادرِ عکس و متن.
   padcore150: سلکتورهای قبلی روی `.lp-card-img`/`.lp-card-title` بودند که در هیچ markupی
   وجود ندارند؛ کارتِ واقعیِ آیتمِ لندینگ `.static-btn-card` با `.sbc-title`/`.sbc-desc` است.
   الگوی استاندارد: اندازه روی کلِ کارت (عرضِ ستون) است، نه روی کادرِ عکس؛ کادرِ عکس
   هم‌عرضِ کارت با نسبتِ ثابتِ ۱۶:۹ در هر سه اندازه، و ناحیهٔ متن آزاد است تا عنوان کوتاه نشود. */
.lp-item-disp[data-card-size] { --lp-card-ratio: var(--lp-item-ratio, 16 / 9); }
.lp-item-disp[data-card-size="sm"] { --lp-card-h: 120px; --lp-card-fs: .875rem;   --lp-card-desc-fs: 11px;   --lp-card-pad: 10px 10px; --lp-card-col: 150px; --lp-card-radius: 10px; }
.lp-item-disp[data-card-size="md"] { --lp-card-h: 180px; --lp-card-fs: 1.0625rem; --lp-card-desc-fs: 12.5px; --lp-card-pad: 14px 14px; --lp-card-col: 220px; --lp-card-radius: 12px; }
.lp-item-disp[data-card-size="lg"] { --lp-card-h: 260px; --lp-card-fs: 1.25rem;   --lp-card-desc-fs: 14px;   --lp-card-pad: 18px 18px; --lp-card-col: 300px; --lp-card-radius: 14px; }

/* عرضِ کلِ کارت با اندازه عوض می‌شود؛ ارتفاع از محتوا می‌آید و کارت‌های یک ردیف هم‌ارتفاع می‌شوند. */
.lp-item-disp[data-card-size] .static-buttons { grid-template-columns: repeat(auto-fill, minmax(var(--lp-card-col), 1fr)); align-items: stretch; }
.lp-item-disp[data-card-size] .static-btn-card { padding: var(--lp-card-pad); height: 100%; }
.lp-item-disp[data-card-size] .sbc-desc { font-size: var(--lp-card-desc-fs); }

/* عنوان کوتاه/بریده نشود — ناحیهٔ متن به‌جای آن بلندتر می‌شود. */
.lp-item-disp[data-card-size] .sbc-title,
.lp-item-disp[data-card-size] .sbc-desc {
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; -webkit-line-clamp: none;
}

/* کادرِ عکسِ کارت: هم‌عرضِ کارت با نسبتِ ثابتِ ۱۶:۹ در هر سه اندازه + بکگراندِ خنثی پشتِ آن. */
.lp-item-disp[data-card-size] .static-btn-card > img,
.lp-item-disp[data-card-size] .static-btn-card .sbc-icon-placeholder {
    width: 100%; height: auto; aspect-ratio: var(--lp-card-ratio);
    border-radius: var(--lp-card-radius); flex: none;
}
.lp-item-disp[data-card-size] .static-btn-card > img,
.lp-item-disp[data-img-mode] .static-btn-card > img { background: var(--tn-surface-2, #f1f3f5); }

/* cover کادر را پر می‌کند (برش)؛ contain کلِ عکس را بدونِ برش/کشیدگی مماس با کادر جا می‌دهد. */
.lp-item-disp[data-img-mode="cover"]   .static-btn-card > img { object-fit: cover; }
.lp-item-disp[data-img-mode="contain"] .static-btn-card > img { object-fit: contain; }

.lp-item-disp[data-card-size] .lp-card-img,
.lp-item-disp[data-card-size] .lp-card-img img,
.lp-item-disp[data-card-size] .lp-stable-img,
.lp-item-disp[data-card-size] .lp-stable-img img,
.lp-item-disp[data-card-size] .lp-cn-thumb,
.lp-item-disp[data-card-size] .lp-cn-thumb img,


.lp-item-disp[data-card-size] .lp-card-title,
.lp-item-disp[data-card-size] .lp-stable-title,
.lp-item-disp[data-card-size] .lp-cn-title,
.lp-item-disp[data-card-size] .lp-news-card-title,
.lp-item-disp[data-card-size] .lp-news-card--imgtop-title,
.lp-item-disp[data-card-size] .lp-news-card--cover-title,
.lp-item-disp[data-card-size] .sbc-title { font-size: var(--lp-card-fs); }

/* ===== padcore151 — استانداردِ واحدِ کارت برای آیتم‌های کارتیِ لندینگ =====
   کارتِ مشترکِ «اخبار» و «شبکهٔ محتوا» در خروجی `.lp-news-card` است (با طرح‌های
   base / --cover / --overlay / --imgtop / --imgbottom / --minimal / --text).
   قواعدِ قبلی فقط `--lp-card-h` را روی کادرِ عکس می‌گذاشتند؛ نتیجه‌اش کادرِ لهیده
   و بی‌تفاوت بودنِ سه اندازه بود. اینجا همان استانداردِ `.static-btn-card` روی
   خانوادهٔ `.lp-news-card` هم پیاده می‌شود:
     ۱) کادرِ عکس همیشه نسبتِ ثابتِ ۱۶:۹ با بکگراندِ خنثی، در هر سه اندازه؛
     ۲) cover پرکننده، contain کلِ عکس بدونِ برش/کشیدگی مماس با کادر؛
     ۳) اندازه عرضِ خودِ کارت را محدود می‌کند (نه فقط عرضِ ستون) تا در گریدِ
        تک‌ستونه هم سه اندازه چشمی متفاوت باشند؛
     ۴) عنوان هرگز کوتاه نمی‌شود، ناحیهٔ متن به‌جایش بلندتر می‌شود.
   همه زیرِ `[data-card-size]`/`[data-img-mode]` است، پس آیتم‌های بدونِ این
   گزینه‌ها (که اصلاً wrapper نمی‌گیرند) دقیقاً مثل امروز رندر می‌شوند. */

/* گرید: ستون‌ها با اندازه مقیاس می‌گیرند و کارت هم‌ارتفاعِ ردیف می‌شود. */
.lp-item-disp[data-card-size] .lp-news-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--lp-card-col), 1fr));
    align-items: stretch;
    justify-content: start;
}
/* عرضِ خودِ کارت هم محدود می‌شود تا در گریدِ تک‌ستونه سه اندازه فرق کنند. */
.lp-item-disp[data-card-size] .lp-news-card {
    max-width: var(--lp-card-max, 100%);
    width: 100%;
    border-radius: var(--lp-card-radius);
    height: auto;
}
.lp-item-disp[data-card-size="sm"] { --lp-card-max: 260px; }
.lp-item-disp[data-card-size="md"] { --lp-card-max: 380px; }
.lp-item-disp[data-card-size="lg"] { --lp-card-max: 520px; }

/* کادرِ عکس — یک نسبتِ افقیِ استاندارد در همهٔ طرح‌ها و هر سه اندازه. */
.lp-item-disp[data-card-size] .lp-news-card-img,
.lp-item-disp[data-card-size] .lp-news-card--imgtop-img {
    width: 100%; height: auto; aspect-ratio: var(--lp-card-ratio);
    flex: none;
}
/* طرح‌های پوششی: تصویر absolute بود؛ به بلوکِ عادی با همان نسبت برمی‌گردد
   تا contain هم بتواند کلِ عکس را نشان دهد. */
.lp-item-disp[data-card-size] .lp-news-card--cover,
.lp-item-disp[data-card-size] .lp-news-card--overlay {
    aspect-ratio: auto; display: flex; flex-direction: column;
}
.lp-item-disp[data-card-size] .lp-news-card--cover .lp-news-card-img,
.lp-item-disp[data-card-size] .lp-news-card--overlay .lp-news-card-img {
    position: relative; inset: auto;
    width: 100%; height: auto; aspect-ratio: var(--lp-card-ratio);
}
/* متنِ روی تصویر در این دو طرح به زیرِ کادر می‌آید تا عنوان کامل دیده شود. */
.lp-item-disp[data-card-size] .lp-news-card--cover .lp-news-card--cover-body,
.lp-item-disp[data-card-size] .lp-news-card--overlay .lp-news-card-body {
    position: relative; inset: auto;
    padding: var(--lp-card-pad);
    background: var(--tn-surface-card, #fff);
}
.lp-item-disp[data-card-size] .lp-news-card--cover .lp-news-card--cover-title,
.lp-item-disp[data-card-size] .lp-news-card--overlay .lp-news-card-title {
    color: var(--tn-on-surface, #1F2328); text-shadow: none;
}
.lp-item-disp[data-card-size] .lp-news-card--overlay .lp-news-card-excerpt,
.lp-item-disp[data-card-size] .lp-news-card--overlay .lp-news-card-meta,
.lp-item-disp[data-card-size] .lp-news-card--overlay .lp-news-card-date {
    color: var(--tn-on-surface-var, #6B7280);
}

/* ناحیهٔ متن با اندازه مقیاس می‌گیرد و عنوان/خلاصه هرگز بریده نمی‌شوند. */
.lp-item-disp[data-card-size] .lp-news-card-body,
.lp-item-disp[data-card-size] .lp-news-card--imgtop-body { padding: var(--lp-card-pad); }
.lp-item-disp[data-card-size] .lp-news-card-excerpt { font-size: var(--lp-card-desc-fs); }
.lp-item-disp[data-card-size] .lp-news-card-title,
.lp-item-disp[data-card-size] .lp-news-card--imgtop-title,
.lp-item-disp[data-card-size] .lp-news-card--cover-title,
.lp-item-disp[data-card-size] .lp-news-card-excerpt {
    display: block; white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; -webkit-line-clamp: none;
}

/* بکگراندِ خنثی پشتِ کادرِ عکس + دو حالتِ نمایش. `--imgtop-img` هم که در
   `--imgbottom` بازاستفاده می‌شود همین‌جا پوشش داده می‌شود. */
.lp-item-disp[data-card-size] .lp-news-card-img,
.lp-item-disp[data-card-size] .lp-news-card--imgtop-img,
.lp-item-disp[data-img-mode] .lp-news-card-img,
.lp-item-disp[data-img-mode] .lp-news-card--imgtop-img { background: var(--tn-surface-2, #f1f3f5); }

.lp-item-disp[data-img-mode="cover"] .lp-news-card-img,
.lp-item-disp[data-img-mode="cover"] .lp-news-card--imgtop-img { object-fit: cover; }
.lp-item-disp[data-img-mode="contain"] .lp-news-card-img,
.lp-item-disp[data-img-mode="contain"] .lp-news-card--imgtop-img { object-fit: contain; }
/* حالتِ نرمال در طرح‌های پوششی هم باید کلِ عکس را نشان دهد. */
.lp-item-disp[data-img-mode="contain"] .lp-news-card--cover .lp-news-card-img,
.lp-item-disp[data-img-mode="contain"] .lp-news-card--overlay .lp-news-card-img {
    object-fit: contain; position: relative; inset: auto;
    width: 100%; height: auto; aspect-ratio: var(--lp-card-ratio);
}
.lp-item-disp[data-img-mode="contain"] .lp-news-card--cover,
.lp-item-disp[data-img-mode="contain"] .lp-news-card--overlay { aspect-ratio: auto; }
/* ===== پایانِ padcore151 ===== */

@media (max-width: 640px) {
    .lp-section--pad-none   .lp-section-inner,
    .lp-section--pad-narrow .lp-section-inner,
    .lp-section--pad-normal .lp-section-inner,
    .lp-section--pad-wide   .lp-section-inner { padding-top: 0; padding-bottom: 0; }
}

/* padcore130 — مرزِ چپ/راستِ لندینگ: آیتم‌ها تمام‌عرض.
   فاصلهٔ افقی از دو جا می‌آمد:
     ۱) `body.app-mode-site .site-main` — app.css:144-147: هم paddingِ افقی
        (`32px 24px 48px`؛ واریانتِ ≤640px `20px 14px 32px` — app.css:150)
        و هم `max-width:1400px` + `margin:0 auto` که کلِ ستون را وسط‌چین و
        محدود نگه می‌دارد (امضایش حاشیهٔ متقارنِ چپ/راست است، نه padding).
     ۲) `.lp-section-inner { max-width:1400px; margin:0 auto }` — landing.css:93
        به‌همراه paddingِ افقیِ ۳۲px در هر چهار واریانتِ pad-* — landing.css:97-100
   هر دو فقط برای لندینگ (کلاسِ lp-landing روی body) خنثی می‌شوند؛
   صفحاتِ app-mode-site بدونِ lp-landing دست‌نخورده می‌مانند.
   توجه: max-widthِ landing.css:35 روی `.lp-header-inner` است (هدر) نه wrapperِ آیتم‌ها،
   پس عمداً دست‌نخورده می‌ماند تا هدر مرکزچین بماند. */
body.app-mode-site.lp-landing .site-main { padding-left:0; padding-right:0; max-width:none; }

/* padcore147 (ج) — این قواعد قبلاً **بی‌قید** بودند و هر سکشنِ لندینگ را لبه‌به‌لبه
   می‌کردند؛ نتیجه این بود که سوییچِ عرضِ padcore136 (`.lp-section--w-full`، خطِ ۱۰۶)
   با specificityِ پایین‌ترش هرگز دیده نمی‌شد و گزینهٔ «فاصلهٔ سکشن از کناره‌ها» در
   خروجی بی‌اثر بود. حالا به `--w-full` مقید شده‌اند: `full` = رفتارِ padcore141
   (تمام‌عرض)، `boxed` = گریدِ استاندارد (max-width + paddingِ افقیِ pad-*). */
body.app-mode-site.lp-landing .lp-section--w-full > .lp-section-inner { max-width:none; margin-left:0; margin-right:0; }

body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-none   > .lp-section-inner,
body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-narrow > .lp-section-inner,
body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-normal > .lp-section-inner,
body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-wide   > .lp-section-inner { padding-left:0; padding-right:0; }

@media (max-width: 640px) {
    body.app-mode-site.lp-landing .site-main { padding-left:0; padding-right:0; max-width:none; }
    body.app-mode-site.lp-landing .lp-section--w-full > .lp-section-inner { max-width:none; margin-left:0; margin-right:0; }
    body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-none   > .lp-section-inner,
    body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-narrow > .lp-section-inner,
    body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-normal > .lp-section-inner,
    body.app-mode-site.lp-landing .lp-section--w-full.lp-section--pad-wide   > .lp-section-inner { padding-left:0; padding-right:0; }
}

/* padcore137 — شبکهٔ محتوا، حالتِ «تصویر بالا، عنوان زیرِ تصویر» — کلاسِ `lp-news-card--imgtop`.
   برخلافِ `--cover` که عنوان را روی تصویر می‌اندازد، اینجا تصویر و متن دو بلوکِ جدا هستند.
   انتخابی است؛ بدونِ این کلاس هیچ قاعده‌ای فعال نمی‌شود و خروجیِ امروز دست‌نخورده می‌ماند.

   گزینهٔ «زیرِ هم» عمداً CSSِ تازه ندارد: آیتم فقط `lp-news-grid--1`ِ موجود را
   می‌گیرد، پس `.lp-section-inner` و گریدِ سکشن هرگز لمس نمی‌شوند. */
.lp-news-card--imgtop {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
.lp-news-card--imgtop-img {
    display: block; width: 100%; aspect-ratio: 4/3;
    object-fit: cover; transition: transform .4s ease;
}
.lp-news-card--imgtop:hover .lp-news-card--imgtop-img { transform: scale(1.04); }
.lp-news-card--imgtop-body { padding: 12px 14px 14px; }
.lp-news-card--imgtop-title {
    font-size: 15px; font-weight: 700; line-height: 1.7;
    margin: 0; color: inherit;
}
.lp-news-card--imgtop-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
}

/* padcore147 (الف) — حالتِ چهارم: «تصویر پایین، عنوان بالای آن». همان کارتِ imgtop است،
   فقط ترتیبِ DOM معکوس شده؛ فرزندانش عمداً همان کلاس‌های `--imgtop-*` را دارند تا
   قاعده‌ای تکرار نشود. `--imgtop` بالا دست‌نخورده ماند. */
.lp-news-card--imgbottom {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
.lp-news-card--imgbottom:hover .lp-news-card--imgtop-img { transform: scale(1.04); }


/* ===== padcore153 — نسبتِ ابعادِ تصویرِ تعریف‌شده توسطِ ادمین =====
   دو نوعِ اسلایدر و شبکهٔ محتوا تا امروز نسبتِ ثابتِ 16/9 داشتند. حالا اگر ادمین
   نسبتی وارد کند، بلید `--lp-item-ratio` را روی wrapperِ همان آیتم می‌گذارد.
   غایب ⇒ fallback همان 16/9 ⇒ خروجیِ آیتم‌های موجود بایت‌به‌بایت مثلِ امروز.
   `--lp-card-ratio` بالاتر هم از همین متغیر fallback می‌گیرد، پس نسبت در هر سه
   اندازهٔ کارت و همهٔ چیدمان‌های شبکهٔ محتوا یکسان اعمال می‌شود. */
/* padcore155 — اسلایدرِ واقعی (`_pad_slider.blade.php`) markupش `.pad-slide` است، نه
   `.lp-slider-slide`. کادرِ دیدنی را خودِ `.pad-slide` تعیین می‌کند (تصویرِ داخلش
   `height:100%` + `object-fit:cover` دارد)، پس نسبت باید روی همان بنشیند.
   fallback عمداً `16 / 7` = نسبتِ ثابتِ امروزِ اسلایدر ⇒ آیتمِ بدونِ نسبت بدونِ تغییر. */
.lp-item-disp[data-img-ratio] .pad-slide,
.lp-item-disp[data-img-ratio] .pad-slide-no-img { aspect-ratio: var(--lp-item-ratio, 16 / 7); }

/* شبکهٔ محتوا وقتی «اندازهٔ کارت» ندارد هم باید نسبت را بگیرد. */
.lp-item-disp[data-img-ratio] .lp-news-card-img,
.lp-item-disp[data-img-ratio] .lp-news-card--imgtop-img {
    width: 100%; height: auto; aspect-ratio: var(--lp-item-ratio, 16 / 9);
}
.lp-item-disp[data-img-ratio] .lp-news-card--cover,
.lp-item-disp[data-img-ratio] .lp-news-card--overlay { aspect-ratio: auto; }
.lp-item-disp[data-img-ratio] .lp-news-card--cover .lp-news-card-img,
.lp-item-disp[data-img-ratio] .lp-news-card--overlay .lp-news-card-img {
    position: relative; inset: auto;
    width: 100%; height: auto; aspect-ratio: var(--lp-item-ratio, 16 / 9);
}
/* ===== پایانِ padcore153 ===== */