/* Magazine single (مجلة قلمون) — section styles. RTL. v1.6.11 */
.acs-mag-single :where(a){text-decoration:none}
/* Every section fills the Bricks content container and aligns to the RTL start,
   matching the workshop/topic singles (single.css §"container"). */
.acs-maghead,
.acs-maghero,
.acs-magpdf,
.acs-magcontents{width:100%;align-self:stretch;box-sizing:border-box}

/* head */
.acs-maghead{display:flex;flex-direction:column;gap:16px}
.acs-maghead__title{font-family:"Readex Pro",sans-serif;font-weight:600;font-size:32px;line-height:1.5;color:#231F20;margin:0}
.acs-maghead__meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:#9C999A}
.acs-maghead__updated{font-family:"Readex Pro",sans-serif;font-weight:400;font-size:12px;line-height:1.5}

/* hero — the issue cover, centered in the content column with section rhythm */
.acs-maghero{margin:32px auto;text-align:center}
.acs-maghero__img{max-width:min(100%,800px);height:auto;border-radius:4px;display:inline-block;margin-inline:auto}
.acs-maghero__ribbon{font-family:"Readex Pro",sans-serif;font-weight:500;font-size:16px;color:#068788;margin-top:12px}

/* pdf viewer — the full issue in a NATIVE browser <iframe> (renders Arabic
   correctly; the browser supplies its own toolbar / zoom / download). */
.acs-magpdf{margin:32px 0}
.acs-magpdf__frame{display:block;width:100%;height:80vh;min-height:600px;border:1px solid #E5EFED;border-radius:4px;background:#F7F7F7}
@media(max-width:640px){.acs-magpdf__frame{height:70vh;min-height:420px}}

/* محتويات العدد — one stacked card per article (matches the old site):
   teal type header + arrow · white title · gray footer (author + download). */
.acs-magcontents{margin:32px 0;display:flex;flex-direction:column;gap:24px;direction:rtl}
/* 4 cards per row (responsive down to 1) — matches the old-site contents grid.
   Cards stretch to equal height; title area grows so footers align across the row. */
.acs-magcontents__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:1024px){.acs-magcontents__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.acs-magcontents__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.acs-magcontents__list{grid-template-columns:1fr}}
.acs-magcontents__card{display:flex;flex-direction:column;height:100%;border:1px solid #EDEDED;border-radius:4px;overflow:hidden}
.acs-magcontents__type{display:flex;align-items:center;gap:8px;background:#068788;color:#fff;padding:10px 16px;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:16px;line-height:1.5}
.acs-magcontents__ctitle{flex:1 1 auto;background:#fff;color:#231F20;padding:14px 16px;font-family:"Readex Pro",sans-serif;font-weight:500;font-size:16px;line-height:1.6}
.acs-magcontents__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#F7F7F7;padding:10px 16px}
.acs-magcontents__author{display:flex;align-items:center;gap:8px;font-family:"Readex Pro",sans-serif;font-weight:400;font-size:14px;line-height:1.5;color:#231F20}
.acs-magcontents__author a{color:#231F20}
.acs-magcontents__author a:hover{color:#068788;text-decoration:underline}
.acs-magcontents__author .acs-magcontents__arrow{color:#068788}
.acs-magcontents__arrow{display:inline-flex;flex:0 0 auto;width:11px;height:11px}
.acs-magcontents__arrow svg{width:100%;height:100%;display:block;fill:currentColor}
.acs-magcontents__dl{display:inline-flex;flex:0 0 auto;line-height:0;transition:opacity .15s ease}
.acs-magcontents__dl:hover{opacity:.85}
.acs-magcontents__dl svg{display:block}

/* phones: match the sibling singles — drop the headline from 32→24px, the same
   size the magazine archive head and the news/book/workshop singles use. */
@media(max-width:478px){
  .acs-maghead__title{font-size:24px}
}

/* sidebar cover (acs-magazine-cover) — the issue mockup, fills its Bricks column. */
.acs-magcover{margin:0}
.acs-magcover__img{width:100%;height:auto;display:block;border-radius:4px;border:.5px solid rgba(133,135,135,.24);box-sizing:border-box}

/* sidebar download button (acs-magazine-dlbtn) — «حمل PDF». Desktop: 358×48, 10px
   radius, STICKY 20px from the top of the viewport as the sidebar scrolls. */
.acs-magdlbtn{position:sticky;top:20px;display:block}
.acs-magdlbtn__btn{box-sizing:border-box;width:358px;max-width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--acs-teal,#068788);color:#fff;border-radius:10px;padding:0 22px;text-decoration:none;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:16px;line-height:1.5;transition:background .15s ease}
.acs-magdlbtn__btn:hover{background:#04696a;color:#fff}
.acs-magdlbtn__ic{display:inline-flex;flex:0 0 auto;line-height:0}
.acs-magdlbtn__ic svg{display:block}
.acs-magdlbtn__label{white-space:nowrap}
/* On phones the sidebar button is replaced by the body-level FAB below (.acs-magfab):
   a position:fixed FAB trapped inside the Bricks sidebar column scrolls with the
   stacked sidebar (page bottom) instead of floating, so we hide it here. */
@media(max-width:900px){.acs-magdlbtn{display:none !important}}

/* Phone-only floating «تحميل PDF» button — printed in wp_footer (frontend/magazine.php)
   as a DIRECT child of <body> so it floats over the whole page (fixed, bottom-left),
   escaping the Bricks column transform that trapped the sidebar version. The circle is
   the FAB; the label is a SEPARATE rounded pill beside it (same green, same rounded
   corners), revealed by a tap (.is-open — touch, single.js) or hover (pointer). The
   reveal is a GPU-friendly fade + slide + slight scale, so it stays smooth. */
.acs-magfab{display:none}
@media(max-width:900px){
  .acs-magfab{display:block;position:fixed;left:20px;bottom:24px;z-index:1000}
  .acs-magfab__btn{position:relative;display:block;width:56px;height:56px;text-decoration:none}
  /* the round FAB */
  .acs-magfab__ic{width:56px;height:56px;border-radius:50%;background:var(--acs-teal,#068788);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 4px rgba(255,255,255,.3)}
  .acs-magfab__ic svg{width:26px;height:26px}
  /* the label = a separate green pill beside the circle */
  .acs-magfab__label{position:absolute;top:50%;left:calc(100% + 12px);height:56px;box-sizing:border-box;display:flex;align-items:center;padding:0 22px;background:var(--acs-teal,#068788);color:#fff;border-radius:28px;white-space:nowrap;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:16px;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transform:translateY(-50%) translateX(-10px) scale(.96);transform-origin:left center;transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
  .acs-magfab.is-open .acs-magfab__label{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
}
@media(max-width:900px) and (hover:hover){
  /* pointer devices: reveal on hover, hide as soon as the mouse leaves (no lingering) */
  .acs-magfab__btn:hover .acs-magfab__label{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
}
