/* =========================================================================
   Inner pages — Page hero / Breadcrumb / FAQ / Service detail / Sidebar
   ========================================================================= */

/* ---- Page hero (صفحات داخلية) ---- */
.page-hero { padding-top: clamp(48px, 5vw, 88px); padding-bottom: clamp(40px, 4vw, 64px); position: relative; }
.page-hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, var(--accent-tint-2), transparent 60%);
}
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent-strong); }
.breadcrumb .sep { color: var(--line-2); }
.page-hero h1 { max-width: 900px; }
.page-hero .lead { max-width: 620px; margin-top: 20px; }
.page-hero__actions { display:flex; gap:14px; flex-wrap:wrap; margin-top: 30px; }

/* ---- Two-column detail layout with sticky aside ---- */
.detail-wrap { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1000px){ .detail-wrap{ grid-template-columns: 1fr 340px; gap: 64px; } }
.detail-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
@media (max-width: 999px){ .detail-aside{ position: static; } }
.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-2); }
.aside-card h4 { font-size: 1.05rem; margin-bottom: 14px; }
.aside-card .price { font-size: 1.9rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.aside-card .price small { font-size: .9rem; color: var(--muted); font-weight: 500; }
.aside-list { display: grid; gap: 12px; margin: 18px 0; }
.aside-meta { display:flex; flex-direction:column; gap:10px; font-size:.9rem; color:var(--muted); margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.aside-meta div { display:flex; justify-content:space-between; }
.aside-meta b { color: var(--ink); font-weight:600; }

/* ---- Rich content blocks ---- */
.block { margin-bottom: clamp(40px, 4vw, 64px); }
.block > h2 { margin-bottom: 16px; }
.block > .lead { margin-bottom: 24px; }
.rich p { margin-bottom: 16px; color: var(--ink-soft); }
.rich p:last-child { margin-bottom: 0; }

.feature-grid { display: grid; gap: 16px; }
@media (min-width: 640px){ .feature-grid{ grid-template-columns: repeat(2,1fr);} }
.feature { display:flex; gap:14px; padding: 20px; border:1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.feature .ic { width: 24px; height: 24px; color: var(--accent-strong); flex:none; margin-top:2px; }
.feature b { display:block; color: var(--ink); font-weight:600; margin-bottom:4px; }
.feature span { font-size:.92rem; color: var(--muted); }

/* results stat row */
.stat-row { display:grid; gap:20px; grid-template-columns: repeat(2,1fr); }
@media (min-width:720px){ .stat-row{ grid-template-columns: repeat(4,1fr);} }
.stat { padding: 24px; border:1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.stat .n { font-size: 2rem; font-weight:700; color: var(--accent-strong); letter-spacing:-.02em; line-height:1; }
.stat .l { font-size:.9rem; color: var(--muted); margin-top:8px; }

/* ---- FAQ accordion ---- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 8px; display:flex; justify-content: space-between; align-items:center; gap: 16px;
  font-weight: 600; color: var(--ink); font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary .plus { width: 24px; height: 24px; flex:none; position: relative; transition: transform .25s var(--ease); }
.faq summary .plus::before, .faq summary .plus::after { content:""; position:absolute; inset-block-start:11px; inset-inline: 3px; height:2px; background: var(--accent-strong); border-radius:2px; }
.faq summary .plus::after { transform: rotate(90deg); transition: transform .25s var(--ease); }
.faq details[open] summary .plus::after { transform: rotate(0); }
.faq details[open] summary .plus { transform: rotate(180deg); }
.faq__a { padding: 0 8px 24px; color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 760px; }

/* ---- Filter chips (portfolio/blog) ---- */
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 32px; }
.filter-chip { padding: 9px 18px; border-radius: var(--r-pill); border:1px solid var(--line-2); background: var(--surface); font-size:.92rem; font-weight:500; color: var(--ink-soft); cursor:pointer; transition: all .18s; }
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color:#fff; border-color: var(--ink); }
@media (pointer: coarse) { .filter-chip { min-height: 44px; } }

/* ---- Portfolio grid ---- */
.pf-grid { display: grid; gap: 24px; }
@media (min-width: 680px){ .pf-grid{ grid-template-columns: repeat(2,1fr);} }
.pf-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.pf-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.pf-card .ph { aspect-ratio: 16/10; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.pf-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pf-card__cat { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-card h3 { font-size: 1.3rem; }
.pf-card__stats { display: flex; gap: 22px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.pf-card__stats .n { font-size: 1.3rem; font-weight: 700; color: var(--accent-strong); line-height: 1; }
.pf-card__stats .l { font-size: .78rem; color: var(--muted); margin-top: 4px; }

/* ---- Article prose ---- */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: clamp(1.5rem,1.2rem+1vw,2rem); margin-top: 44px; }
.prose h3 { font-size: 1.3rem; margin-top: 32px; }
.prose p { color: var(--ink-soft); font-size: 1.075rem; line-height: 1.85; }
.prose ul { display: grid; gap: 12px; padding-inline-start: 4px; }
.prose ul li { position: relative; padding-inline-start: 26px; color: var(--ink-soft); }
.prose ul li::before { content:""; position:absolute; inset-inline-start:0; top:12px; width:8px; height:8px; border-radius:50%; background: var(--accent); }
.prose blockquote { border-inline-start: 3px solid var(--accent); padding: 4px 20px; color: var(--ink); font-size: 1.2rem; font-weight: 500; }
.prose img, .prose .ph { border-radius: var(--r-lg); }
.article-hero { max-width: 820px; }
.article-meta { display:flex; align-items:center; gap: 14px; flex-wrap:wrap; margin-top: 20px; font-size:.9rem; color: var(--muted); }
.article-ava { width: 40px; height:40px; border-radius:50%; background: var(--accent-tint); color: var(--accent-strong); display:grid; place-items:center; font-weight:700; }

/* ---- Comparison table ---- */
.cmp { width: 100%; border-collapse: collapse; font-size: .98rem; }
.cmp th, .cmp td { padding: 16px; text-align: start; border-bottom: 1px solid var(--line); }
.cmp thead th { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.cmp tbody th { font-weight: 500; color: var(--ink-soft); }
.cmp td { text-align: center; color: var(--muted); }
.cmp .yes { color: var(--accent-strong); font-weight: 700; }
.cmp .featured-col { background: var(--accent-tint-2); }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }

/* ---- About values / team ---- */
.team-grid { display:grid; gap:20px; grid-template-columns: repeat(2,1fr); }
@media (min-width:720px){ .team-grid{ grid-template-columns: repeat(4,1fr);} }
.team .ph { aspect-ratio: 1; border-radius: var(--r-lg); margin-bottom: 14px; }
.team b { display:block; color: var(--ink); }
.team span { font-size:.88rem; color: var(--muted); }

.big-stats { display:grid; gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; grid-template-columns: repeat(2,1fr); }
@media (min-width:720px){ .big-stats{ grid-template-columns: repeat(4,1fr);} }
.big-stats > div { background: var(--surface); padding: 28px; text-align:center; }
.big-stats .n { font-size: clamp(2rem,1.5rem+1.5vw,3rem); font-weight:700; color: var(--ink); letter-spacing:-.02em; }
.big-stats .l { font-size:.9rem; color: var(--muted); margin-top:6px; }

/* ---- Booking steps ---- */
.book-what { display:grid; gap:14px; }
.book-what .item { display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.book-what .num { width:30px;height:30px;border-radius:50%;background:var(--accent-tint);color:var(--accent-strong);display:grid;place-items:center;font-weight:700;flex:none;font-size:.9rem; }

/* ---- Simple section intro centered helper reused ---- */
.mini-cta {
  margin-top: clamp(40px,4vw,64px); background: var(--accent-tint); border-radius: var(--r-xl);
  padding: clamp(28px,4vw,48px); text-align:center;
}
.mini-cta h3 { font-size: clamp(1.4rem,1.1rem+1vw,2rem); margin-bottom: 10px; }
.mini-cta p { color: var(--muted); margin-bottom: 24px; max-width: 520px; margin-inline:auto; }

/* ---- Works grid (أعمالنا) — تصميم أصلي لـ«رؤية» ---- */
.works-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.work-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.work-card__img { aspect-ratio: 1426 / 1080; overflow: hidden; background: var(--surface-2); display: block; }
.work-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.work-card:hover .work-card__img img { transform: scale(1.05); }
.work-card__body { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.work-card__body b { font-size: 1rem; color: var(--ink); font-weight: 600; line-height: 1.4; }
.work-card__cat { font-size: .72rem; font-weight: 600; color: var(--accent-strong); background: var(--accent-tint); padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; flex: none; }
.works-count { font-size: .95rem; color: var(--muted); }

/* ---- Package bonus banner (هدية اشتراك سلّة) ---- */
.pkg__bonus { display:flex; align-items:center; gap:10px; background: var(--accent-tint); color: var(--accent-strong); border:1px dashed var(--accent); border-radius: var(--r); padding: 11px 14px; font-weight:700; font-size:.95rem; margin: 4px 0 20px; line-height:1.4; }
.pkg__bonus svg { width:22px; height:22px; flex:none; }
.pkg__bonus .free { background: var(--accent); color:#fff; font-size:.72rem; padding:3px 9px; border-radius: var(--r-pill); margin-inline-start:auto; white-space:nowrap; }