/* ANDALUS_PROOF_SECTION_V1 (owner, 29 Oct 2026) — «من المعرض لبيوت عملائنا», above the footer of every page.
   Markup: includes/andalus-proof.php. Colours from the logo: red #d92f45 for the one accent (active tab, kicker),
   graphite #2d2a35 for text, so the section leads into the graphite footer. One 8px spacing scale.
   Phones: tabs full width, cards swipe (snap), no arrows. Tablets: more cards per row. Computers: arrows. */

.an-pf{
  --pf-red:#d92f45; --pf-red-soft:#fff3f4; --pf-ink:#2d2a35; --pf-ink-2:#1b1921; --pf-muted:#6c6775; --pf-line:#e4e1ea;
  --pf-bg:#f6f5f8; --pf-card:#fff; --pf-wa:#128c4a;
  position:relative; direction:rtl; text-align:right; font-family:'Tajawal',Arial,sans-serif; color:var(--pf-ink);
  background:linear-gradient(180deg,#fff 0%,var(--pf-bg) 100%); border-top:1px solid var(--pf-line);
  padding:48px 0 40px; margin:0; line-height:1.6; overflow:hidden;
}
.an-pf *{box-sizing:border-box}
.an-pf a{text-decoration:none;color:inherit}
.an-pf a:focus-visible,.an-pf button:focus-visible,.an-pf [data-pf-track]:focus-visible{outline:3px solid rgba(217,47,69,.45);outline-offset:3px;border-radius:12px}
.an-pf__anchor{position:absolute;top:-80px}
.an-pf__ic{width:18px;height:18px;flex:none;fill:currentColor;display:block}
.an-pf__wrap{width:min(1280px,calc(100% - 32px));margin-inline:auto}

/* head */
.an-pf__head{display:flex;flex-direction:column;gap:20px;margin-bottom:16px}
.an-pf__kicker{display:inline-flex;align-items:center;gap:8px;color:var(--pf-red);font-weight:900;font-size:14px;letter-spacing:0}
.an-pf__kicker::before{content:"";width:24px;height:3px;border-radius:3px;background:var(--pf-red)}
.an-pf h2.an-pf__title{margin:8px 0 8px!important;font-size:clamp(24px,5.6vw,34px)!important;line-height:1.3!important;font-weight:900!important;color:var(--pf-ink-2)!important;letter-spacing:0!important}
.an-pf__lead{margin:0;max-width:640px;color:var(--pf-muted);font-size:16px;font-weight:600}
.an-pf__facts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.an-pf__facts li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--pf-line);font-size:13px;font-weight:800;color:var(--pf-ink)}
.an-pf__facts .an-pf__ic{width:16px;height:16px;color:var(--pf-wa)}

/* tabs: one segmented control */
.an-pf__tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:16px;background:#ecebf0;border:1px solid var(--pf-line)}
.an-pf__tab{appearance:none;border:0;margin:0;cursor:pointer;font:inherit;min-height:48px;padding:6px 8px;border-radius:12px;background:transparent;color:var(--pf-ink);
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:800;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.an-pf__tab span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.an-pf__tab b{flex:none;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:rgba(45,42,53,.1);font-size:12px;font-weight:900;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.an-pf__tab[aria-selected="true"]{background:#fff;color:var(--pf-red);box-shadow:0 4px 14px rgba(45,42,53,.12)}
.an-pf__tab[aria-selected="true"] b{background:var(--pf-red);color:#fff}
.an-pf__tab:not([aria-selected="true"]):hover{background:rgba(255,255,255,.6)}

/* panel bar: hint + arrows */
.an-pf__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px}
.an-pf__hint{margin:0;color:var(--pf-muted);font-size:14px;font-weight:700}
.an-pf__nav{display:none;gap:8px;flex:none}
.an-pf__arrow{appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--pf-line);background:#fff;color:var(--pf-ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 12px rgba(45,42,53,.08)}
.an-pf__arrow .an-pf__ic{width:22px;height:22px}
.an-pf__arrow:hover:not(:disabled){border-color:var(--pf-ink)}
.an-pf__arrow:disabled{opacity:.35;cursor:default;box-shadow:none}

/* track: swipe row, one card snapped at a time */
.an-pf__track{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 16px;margin:0 -2px;align-items:stretch}
.an-pf__track::-webkit-scrollbar{display:none}
.an-pf__track--videos{grid-auto-columns:60%}
.an-pf__card{scroll-snap-align:start;min-width:0}

/* cards */
.an-pf__card--home,.an-pf__card--post{background:var(--pf-card);border:1px solid var(--pf-line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(45,42,53,.07);display:flex;flex-direction:column}
.an-pf__photo{position:relative;display:block;aspect-ratio:4/5;background:#e9e7ee;overflow:hidden}
.an-pf__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.an-pf__photo:hover img{transform:scale(1.04)}
/* page posts: many old post designs carry a contact strip (with an old number) along the bottom — show the photo part only */
.an-pf__photo--post{aspect-ratio:4/3}
.an-pf__photo--post img{object-position:50% 0}
.an-pf__stamp{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(18,140,74,.95);color:#fff;font-size:13px;font-weight:900}
.an-pf__stamp .an-pf__ic{width:15px;height:15px}
.an-pf__count{position:absolute;bottom:10px;left:10px;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:rgba(27,25,33,.72);color:#fff;font-size:12px;font-weight:800}
.an-pf__count .an-pf__ic{width:14px;height:14px}
.an-pf__chip{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--pf-ink);font-size:13px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.an-pf__body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.an-pf__name{font-size:16px;font-weight:900;color:var(--pf-ink-2);line-height:1.4}
.an-pf__meta{margin:0;color:var(--pf-muted);font-size:14px;font-weight:700}
.an-pf__cap{margin:0;color:var(--pf-ink);font-size:15px;font-weight:700;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.an-pf__acts{display:flex;gap:8px;align-items:stretch;margin-top:auto}
.an-pf__ask{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;border-radius:12px;background:#eaf6ef;color:#0d6b37;font-size:14px;font-weight:900;border:1px solid #cfe9da;flex:1;transition:background .2s}
.an-pf__ask:hover{background:#dcf0e4}
.an-pf__acts .an-pf__ask{margin-top:0}
.an-pf__fb{flex:none;width:44px;min-height:44px;border-radius:12px;display:grid;place-items:center;background:#f1f2f6;color:#1877f2;border:1px solid var(--pf-line)}

/* video card: the site-wide YouTube component, sized for a narrow card (same as the category rail) */
.an-pf .an-yt[data-yt-layout="portrait"]{width:100%;margin:0;--an-yt-radius:18px}
.an-pf .an-yt[data-yt-layout="portrait"] .an-yt__frame{aspect-ratio:auto;box-shadow:0 10px 26px rgba(36,16,20,.18)}
.an-pf .an-yt[data-yt-layout="portrait"] .an-yt__stage{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:9/16;box-shadow:none}
.an-pf .an-yt[data-yt-layout="portrait"] .an-yt__bg{display:none}
.an-pf .an-yt__btn{width:54px;height:54px;margin:-27px 0 0 -27px;box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 0 7px rgba(255,255,255,.16)}
.an-pf .an-yt__btn svg{width:24px;height:24px}
.an-pf .an-yt__hint{display:none}
.an-pf .an-yt__title{font-size:14px;padding:34px 10px 10px;line-height:1.45}
.an-pf .an-yt__bar{gap:6px;margin-top:8px;flex-wrap:nowrap}
.an-pf .an-yt__fs,.an-pf .an-yt__open{min-height:40px;padding:0 10px;font-size:13px;gap:5px}
.an-pf .an-yt__open span{display:none}
.an-pf .an-yt.is-theater .an-yt__stage{width:min(100vw,calc(100dvh * 9 / 16))!important}
.an-pf__more{display:flex;align-items:center;justify-content:center;gap:4px;min-height:40px;margin-top:8px;padding:0 10px;border-radius:12px;background:#fff;border:1px solid var(--pf-line);color:var(--pf-ink);font-size:13px;font-weight:900}
.an-pf__more .an-pf__ic{width:15px;height:15px}
.an-pf__more:hover{border-color:var(--pf-ink)}

/* last card of a row: where the rest is */
.an-pf__end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;aspect-ratio:4/5;padding:16px;border-radius:18px;
  border:2px dashed #d5d1dc;background:#fff;color:var(--pf-ink);font-size:14px;line-height:1.6}
.an-pf__track--videos .an-pf__end{aspect-ratio:9/16}
.an-pf__end strong{font-size:16px;font-weight:900}
.an-pf__end>span:last-child{color:var(--pf-muted);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.an-pf__end>span:last-child .an-pf__ic{width:14px;height:14px}
.an-pf__end-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--pf-ink);color:#fff}
.an-pf__end-ic .an-pf__ic{width:26px;height:26px}
.an-pf__end:hover{border-color:var(--pf-ink);background:#fbfafc}

/* follow line */
.an-pf__follow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:16px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--pf-line)}
.an-pf__follow-lbl{font-size:15px;font-weight:900;color:var(--pf-ink)}
.an-pf__follow-links{display:flex;flex-wrap:wrap;gap:8px}
.an-pf__net{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--pf-line);background:#fff;font-size:14px;font-weight:800;color:var(--pf-ink);transition:border-color .2s,background .2s}
.an-pf__net:hover{border-color:var(--pf-ink);background:#fbfafc}
.an-pf__net--facebook .an-pf__ic{color:#1877f2}
.an-pf__net--instagram .an-pf__ic{color:#d62976}
.an-pf__net--tiktok .an-pf__ic{color:#111}
.an-pf__net--youtube .an-pf__ic{color:#ff0000}

/* phones: the three tabs fit one line (no icons, smaller count) */
@media (max-width:560px){
  .an-pf__tab{font-size:14px;gap:5px;padding:6px 4px}
  .an-pf__tab .an-pf__ic{display:none}
  .an-pf__tab b{min-width:20px;height:20px;padding:0 5px;font-size:11px}
}
/* small phones */
@media (max-width:380px){
  .an-pf__track{grid-auto-columns:82%}
  .an-pf__track--videos{grid-auto-columns:66%}
  .an-pf__follow{justify-content:center;text-align:center}
  .an-pf__follow-links{justify-content:center}
}
/* tablets */
@media (min-width:640px){
  .an-pf__track{grid-auto-columns:calc((100% - 24px) / 2.4)}
  .an-pf__track--videos{grid-auto-columns:calc((100% - 36px) / 3.4)}
}
@media (min-width:900px){
  .an-pf{padding:64px 0 48px}
  .an-pf__head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px}
  .an-pf__tabs{flex:none;min-width:420px}
  .an-pf__track{gap:16px}
  .an-pf__track{grid-auto-columns:calc((100% - 36px) / 3.3)}
  .an-pf__track--videos{grid-auto-columns:calc((100% - 48px) / 4.3)}
}
/* computers: arrows, whole cards in a row */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .an-pf__nav{display:flex}
  .an-pf__track{grid-auto-columns:calc((100% - 48px) / 4)}
  .an-pf__track--videos{grid-auto-columns:calc((100% - 64px) / 5)}
}
@media (min-width:1500px){
  .an-pf__track{grid-auto-columns:calc((100% - 64px) / 5)}
  .an-pf__track--videos{grid-auto-columns:calc((100% - 80px) / 6)}
}
@media (prefers-reduced-motion:reduce){
  .an-pf__photo img,.an-pf__tab{transition:none}
  .an-pf__track{scroll-behavior:auto}
}