/* Magazine archive (أرشيف مجلة قلمون) — RTL. v1.11.0 */
.acs-magarc :where(a){text-decoration:none}
/* shared gold read button */
.acs-magarc__btn{display:inline-flex;align-items:center;gap:8px;background:#CB9B2A;color:#fff;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:14px;line-height:1.5;border-radius:4px;padding:10px 20px}
.acs-magarc__btn:hover{background:#b98a20}
/* mint issue-number chip */
.acs-magarc__chip{display:inline-flex;align-items:center;background:#E5EFED;color:#068788;font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5;border-radius:16px;padding:4px 12px}
/* local 32/600 section heading + 52×4 teal accent */
.acs-magarc__heading{display: flex;flex-direction: row;align-items: center;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:32px;line-height:1.5;color:#231F20;margin:0;position:relative;}
.acs-magarc__heading::after{content:"";margin: 0px 16px;inset-inline-start:0;bottom:0;width:52px;height:4px;background:#168E7E52}
/* head band (Frame 735): breadcrumb, then a 2-col row — RIGHT title+stats, LEFT board+buttons */
.acs-magarc-head{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
.acs-magarc-head__band{display:flex;gap:24px;align-items:flex-start;padding:32px 0}
.acs-magarc-head__main{width: 100%;flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.acs-magarc-head__side{flex:0 0 557px;max-width:557px;display:flex;flex-direction:column;gap:8px}
.acs-magarc-head__title{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:32px;line-height:1.5;color:#231F20;margin:0}
.acs-magarc-head__stats{display:flex;align-items:center;gap:32px;margin-top:32px;padding-top:30px;border-top:1px solid #E5EFED;width:100%}
.acs-magarc-head__stat{display:flex;flex-direction:column;gap:2px}
.acs-magarc-head__stat-value{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:24px;line-height:1.5;color:#231F20}
.acs-magarc-head__stat-label{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5;color:#9C999A}
.acs-magarc-head__stat-div{flex:0 0 auto;width:1px;height:40px;background:#E5EFED}
.acs-magarc-head__buttons{display:flex;gap:8px}
.acs-magarc-head__btn{gap: 8px;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:14px;line-height:1.5;border-radius:4px;padding:8px 20px;border:1px solid #068788;gap:8px}
.acs-magarc-head__btn--outline{color:#068788;background:#fff}
.acs-magarc-head__btn--outline:hover{background:#E5EFED}
.acs-magarc-head__btn--fill{color:#fff;background:#068788}
.acs-magarc-head__btn--fill:hover{background:#04696a}
/* the icon before each label; fixed box so it never squeezes on a narrow button */
.acs-magarc-head__btn-ic{flex:0 0 auto;display:block;width:12px;height:12px}
/* editorial board card (inside the head's left column) */
.acs-magarc-board{background:#fff;border:1px solid #E5EFED;border-radius:8px;padding:20px;flex:1 1 auto}
.acs-magarc-board__title{display:flex;align-items:center;gap:8px;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:18px;line-height:1.5;color:#231F20;margin:0}
.acs-magarc-board__accent{flex:0 0 auto;width:52px;height:4px;border-radius:2px;background:#068788}
.acs-magarc-board__grid{display:flex;gap:24px;margin-top:16px;align-items:flex-start}
.acs-magarc-board__col{display:flex;flex-direction:column;}
.acs-magarc-board__leads{flex:0 0 auto;gap: 16px;}
.acs-magarc-board__memberscol{min-width:0;gap: 6px;}
.acs-magarc-board__leads .acs-magarc-board__line{gap:4px}
.acs-magarc-board__line{display:flex;flex-direction:column;}
.acs-magarc-board__label{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:14px;line-height:1.5;color:#CB9B2A}
.acs-magarc-board__value{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5;color:#231F20}
.acs-magarc-board__members{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.acs-magarc-board__members li{position:relative;padding-inline-start:12px;font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5;color:#231F20}
.acs-magarc-board__members li::before{content:"";position:absolute;inset-inline-start:0;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;border:1px solid #CB9B2A}
/* band stacks below the desktop breakpoint */
@media(max-width:900px){.acs-magarc-head__band{flex-direction:column}.acs-magarc-head__side{flex-basis:auto;max-width:none}}
/* latest */
.acs-magarc-latest{display:flex;flex-direction:column;gap:24px}
.acs-magarc-latest .acs-magarc__heading{margin-bottom:0}
/* shared card body pieces */
.acs-magarc-card__title{font-family:"Readex Pro",sans-serif;font-weight:500;line-height:1.5;display:block}
.acs-magarc-card__chip,.acs-magarc-card__body .acs-magarc__chip{align-self:flex-start}
/* opt-in title clamp — the element only sets the class+var when a row count is chosen */
.acs-magarc-latest--clamp .acs-magarc-card__title{display:-webkit-box;-webkit-line-clamp:var(--acs-magarc-title-rows);line-clamp:var(--acs-magarc-title-rows);-webkit-box-orient:vertical;overflow:hidden}
/* featured (teal) */
/* cover on the LEFT (row-reverse of the cover-first DOM), content fills the RIGHT */
.acs-magarc-card--featured{position:relative;display:flex;flex-direction:row-reverse;align-items:stretch;gap:48px;background:#068788;border-radius:4px;overflow:hidden;padding:24px 48px;color:#fff}
.acs-magarc-card--featured::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:6px;background:#1D4264}
.acs-magarc-card--featured .acs-magarc-card__cover{flex:0 0 auto}
.acs-magarc-card--featured .acs-magarc-card__cover img{width:190px;height:253px;object-fit:contain;border-radius:4px;display:block}
.acs-magarc-card--featured .acs-magarc-card__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.acs-magarc-card--featured .acs-magarc-card__title{color:#fff;font-size:32px;padding-top:24px}
.acs-magarc-card--featured .acs-magarc-card__excerpt{color:#fff;font-family:"Readex Pro",sans-serif;font-weight:300;font-size:14px;line-height:1.5;margin:0;padding-top:20px}
.acs-magarc-card--featured .acs-magarc-card__foot{margin-top:auto;padding-top:28px}
/* compact (white) */
.acs-magarc-latest__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* text column first (RTL: right), cover on the LEFT — row-reverse of the cover-first DOM */
.acs-magarc-card--compact{display:flex;flex-direction:row-reverse;gap:16px;background:#fff;border-radius:4px;}
.acs-magarc-card--compact .acs-magarc-card__cover{flex:0 0 auto;padding:16px;border-radius:4px;align-self:center}
.acs-magarc-card--compact .acs-magarc-card__cover img{width:127.5px;height:170px;object-fit:contain;border-radius:2px;display:block}
.acs-magarc-card--compact .acs-magarc-card__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding: 16px 16px 16px 0;}
.acs-magarc-card--compact .acs-magarc-card__title{color:#231F20;font-size:18px;padding-top:16px}
.acs-magarc-card--compact .acs-magarc-card__foot{padding-top:24px}
@media(max-width:900px){.acs-magarc-latest__grid{grid-template-columns:1fr}.acs-magarc-card--featured{flex-direction:column;gap:24px}}
/* upcoming teaser */
.acs-magarc-teaser{background:#E5EFED;border:1px solid #E5EFED;border-radius:8px;padding:16px;display:flex;flex-direction:column}
.acs-magarc-teaser__eyebrow{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:12px;line-height:1.5;color:#068788;margin:0}
.acs-magarc-teaser__title{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:14px;line-height:1.5;color:#231F20;margin:0;padding-top:8px}
.acs-magarc-teaser__text{font-family:"Readex Pro",sans-serif;font-weight:300;font-size:14px;line-height:1.5;color:#231F20;margin:0;padding-top:8px}
.acs-magarc-teaser__link{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:14px;line-height:1.5;color:#068788;text-decoration:underline;padding-top:8px;align-self:flex-start}
/* previous list */
.acs-magarc-list{display:flex;flex-direction:column}
.acs-magarc-list .acs-magarc__heading{margin-bottom:32px}
.acs-magarc-list__rows{display:flex;flex-direction:column;gap:48px}
.acs-magarc-row{display:flex;gap:24px;align-items:stretch;flex-direction: row-reverse;}
.acs-magarc-row__text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.acs-magarc-row__title{font-family:"Readex Pro",sans-serif;font-weight:500;font-size:18px;line-height:1.5;color:#231F20;padding-top:16px;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
.acs-magarc-row__excerpt{font-family:"Readex Pro",sans-serif;font-weight:300;font-size:14px;line-height:1.5;color:#9C999A;margin:0;padding-top:16px;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.acs-magarc-row__foot{padding-top:16px}
.acs-magarc-row__cover{flex:0 0 auto;order:2}
.acs-magarc-row__cover img{width:139px;height:185px;object-fit:cover;border-radius:2.74px;display:block}
.acs-magarc-list .acs-pager{margin-top:48px;justify-content:center}
@media(max-width:600px){.acs-magarc-row{flex-direction:column}.acs-magarc-row__cover{order:0}}
/* ── phones ── the 900px/600px rules above already collapse the latest grid,
   featured card and previous-issue rows to one column. This block is phone
   POLISH: mobile heading sizes, a tighter stats rail, the editorial-board member
   list to ONE column (long Arabic names need the width), and lighter rhythm.
   All rules are direction-agnostic (no flex-direction/order), so RTL is safe. */
/* mobile peek-slider chrome (shared markup: .acs-mslider) — the arrow bar is
   hidden on desktop, where the track stays a normal grid. min-width:0 lets the
   wrapper shrink to its parent so the over-wide track scrolls INSIDE it instead
   of stretching the page (the wrapper is a flex item of the .acs-magarc-latest
   column, whose default min-width:auto would otherwise grow to the cards). */
.acs-mslider{min-width:0}
.acs-mslider__nav{display:none}
@media(max-width:478px){
  /* CONTAIN the over-wide slider. Two things matter: (1) the CARD width is a
     DEFINITE viewport value (calc below), not a % of the track — a % is circular
     (track sizes to card, card to track) and makes the track grow to the card
     instead of scrolling; (2) belt-and-braces, clip the page + the root so any
     residual can never make the whole page swipe. The track's own overflow-x:auto
     then does the real finger/arrow scroll. */
  body{overflow-x:clip}
  .acs-magarc-latest{width: 100%;min-width:0;overflow-x:clip}
  /* section headings (أحدث الأعداد / الأعداد السابقة): the teal accent sits BESIDE
     the title — a SHORT 52×4px rule (site standard), colour rgba(22,142,126,.32),
     not the full-width line and not underneath it (client). */
  .acs-magarc__heading{font-size:24px;display:flex;align-items:center;gap:16px;padding-bottom:0}
  .acs-magarc__heading::after{position:static;inset:auto;width:52px;height:4px;flex:0 0 auto;background:rgba(22,142,126,.32)}
  .acs-magarc-head__title{font-size:24px;}
  .acs-magarc-head__stats{gap:16px 20px;flex-wrap:wrap;padding:24px 0}
  .acs-magarc-head__stat-value{font-size:20px}
  .acs-magarc-head__buttons{flex-wrap:wrap}
  .acs-magarc-board__members{grid-template-columns:1fr 1fr}
  /* «العدد القادم» / «العدد ما بعد القادم» teasers → mint BUTTONS only (no title /
     text); the whole button links to the read-more (the link is overlaid). Client
     specs: 175×42, radius 10, bg #E5EFED, teal 16/500 label, 8/41 padding. Two
     sit side by side (the widgets flow inline-block). */
  .acs-magarc-teaser-el{display:inline-block;vertical-align:top}
  .acs-magarc-teaser{position:relative;display:inline-flex;align-items:center;justify-content:center;width:358px;max-width:100%;height:42px;box-sizing:border-box;padding:8px 41px;gap:10px;border:1px solid rgba(6,135,136,.32);border-radius:10px;background:rgba(229,239,237,1)}
  .acs-magarc-teaser__title,.acs-magarc-teaser__text{display:none}
  .acs-magarc-teaser__eyebrow{margin:0;padding:0;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:16px;line-height:1.5;color:rgba(6,135,136,1);white-space:nowrap}
  .acs-magarc-teaser__link{position:absolute;inset:0;padding:0;font-size:0;line-height:0;overflow:hidden}
  /* featured issue card (client): cover FLOATS to the RIGHT, the chip + title flow
     beside it on the left, then the DESCRIPTION and the read BUTTON both span the
     FULL width (clear the float) — same left/right edges as the button. */
  .acs-magarc-card--featured{display:block;padding:16px}
  .acs-magarc-card--featured .acs-magarc-card__cover{float:right;margin:0 0 12px 16px;flex:none}
  .acs-magarc-card--featured .acs-magarc-card__cover img{width:110px;height:auto}
  .acs-magarc-card--featured .acs-magarc-card__body{display:block}
  .acs-magarc-card--featured .acs-magarc-card__title{font-size:18px;padding-top:12px}
  .acs-magarc-card--featured .acs-magarc-card__excerpt{clear:both;font-size:14px;padding-top:16px}
  .acs-magarc-card--featured .acs-magarc-card__foot{clear:both;padding-top:16px}
  .acs-magarc-card--featured .acs-magarc__btn{display:flex;justify-content:center}
  .acs-magarc-card--compact .acs-magarc-card__title{font-size:16px}
  /* «أحدث الأعداد» → horizontal PEEK slider. Each card is WIDER than the screen
     (100% + ~90px) so, snapped to the right edge, its cover (on the LEFT) is only
     ~half visible — the left half sits off-screen, telling the reader to slide.
     Arrows below (mobile-sliders.js) scroll it; native touch-swipe also works. */
  .acs-magarc-latest__grid{display:flex;gap:16px;max-width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .acs-magarc-latest__grid::-webkit-scrollbar{display:none}
  .acs-magarc-latest__grid>.acs-magarc-card{flex:0 0 calc(100vw + 90px);box-sizing:border-box;scroll-snap-align:start}
  /* slider card: same cover-LEFT/text-RIGHT order as the base card, wider cover. */
  .acs-magarc-latest__grid .acs-magarc-card--compact .acs-magarc-card__cover{flex:0 0 170px;padding:0;border:0;align-self:flex-start}
  .acs-magarc-latest__grid .acs-magarc-card--compact .acs-magarc-card__cover img{width:170px;height:auto}
  /* arrow bar: two teal circles at the bottom-left; «next» filled (LTR nav so the
     DOM order next→prev lays left→right predictably regardless of the RTL page) */
  .acs-mslider__nav{display:flex;direction:ltr;justify-content:flex-start;gap:16px;margin-top:16px}
  .acs-mslider__btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid #068788;border-radius:50%;background:#fff;color:#068788;cursor:pointer}
  .acs-mslider__btn svg{width:22px;height:22px}
  /*.acs-mslider__btn--next{background:#068788;color:#fff}*/
  /* الأعداد السابقة: rows stay HORIZONTAL (cover on the RIGHT, text on the LEFT) —
     override the 600px column stack (Screenshot). */
  .acs-magarc-list__rows{gap:24px}
  .acs-magarc-row{flex-direction:row;gap:16px;align-items:flex-start}
  .acs-magarc-row__cover{order:-1;flex:0 0 auto}
  .acs-magarc-row__cover img{width:96px;height:auto}
  .acs-magarc-row__title{font-size:16px}
}

/* ===== upcoming-teaser popup (phones) =====
   Built by homepage.js out of the teaser's own title/text/link when the teaser
   is in the collapsed button form above. It is appended to <body>, so these
   rules are unscoped; the three overrides at the end put back what the phone
   block hides or overlays, and they win on specificity rather than on order. */
.acs-teaserpop{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:16px}
.acs-teaserpop[hidden]{display:none}
.acs-teaserpop__backdrop{position:absolute;inset:0;background:rgba(15,25,25,.55)}
.acs-teaserpop__dialog{position:relative;z-index:1;box-sizing:border-box;width:100%;max-width:420px;max-height:80vh;overflow-y:auto;background:#fff;border-radius:12px;padding:44px 20px 20px;box-shadow:0 24px 64px rgba(0,0,0,.24)}
.acs-teaserpop__close{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(229,239,237,1);color:#068788;cursor:pointer}
.acs-teaserpop__close svg{width:14px;height:14px;display:block}
.acs-teaserpop__body{display:flex;flex-direction:column;gap:8px}
.acs-teaserpop .acs-magarc-teaser__eyebrow{margin:0;padding:0;white-space:normal}
.acs-teaserpop .acs-magarc-teaser__title,
.acs-teaserpop .acs-magarc-teaser__text{display:block;margin:0;padding:0}
.acs-teaserpop .acs-magarc-teaser__link{position:static;inset:auto;display:inline-block;align-self:flex-start;padding:0;font-size:14px;line-height:1.5;overflow:visible}
/* while the popup is open the page behind it must not scroll */
.acs-teaserpop-open,.acs-teaserpop-open body{overflow:hidden}