/* ═══════════════════════════════════════════════════════════════
   "אוגוסט במזגן" — הסגנון הייעודי לעמוד אחד.
   נשען על guides.css (צבעים, טיפוגרפיה) ומוסיף רק את מה שאין שם:
   כותרת עם עוגן מספרי, בחירות מהירות, ורשת כרטיסים בשלוש רצועות.
   ═══════════════════════════════════════════════════════════════ */

.ac-page{ max-width:1180px }

/* ── HERO ── המספר הוא העוגן, לא הטקסט סביבו ─────────────────────── */
.ac-page h1{ margin-bottom:10px }
.ac-page h1 .ac-20{
  font-family:var(--font-display,'Suez One',serif);
  color:var(--teal);
}
.ac-page .g-index-sub{ max-width:60ch;margin-bottom:14px }

.ac-trust{
  font-size:15px;line-height:1.7;color:var(--ink);
  border-inline-start:3px solid var(--teal);padding-inline-start:12px;
  margin:0 0 10px;max-width:62ch;
}
.ac-how{ margin:0 0 4px }
.ac-how summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--teal);min-height:44px;
}
.ac-how summary:focus-visible{ outline:2px solid var(--teal);outline-offset:2px;border-radius:4px }
.ac-how ul{ margin:4px 0 0;padding-inline-start:18px;max-width:64ch }
.ac-how li{ font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:5px }
.ac-how b{ color:var(--ink) }

.ac-updated{ font-size:12.5px;color:var(--ink-soft);margin:0 0 22px }
.g-crumb-kind{
  display:inline-block;margin-inline-start:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;color:var(--ink-soft);background:rgba(46,32,20,.07);
  border-radius:3px;padding:1px 7px;vertical-align:middle;
}

/* ── בחירות מהירות ─────────────────────────────────────────────── */
.ac-picks{ margin:0 0 8px }
.ac-picks-t{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  color:var(--ink-soft);margin-bottom:7px;
}
.ac-picks-row{ display:flex;flex-wrap:wrap;gap:7px }
.ac-pick{
  font-family:var(--font,'Noto Sans Hebrew',system-ui,sans-serif);
  font-size:13px;font-weight:600;color:var(--ink-soft);
  background:var(--paper-hi,#F9F1DD);
  border:1px solid rgba(196,168,118,.7);border-radius:20px;
  padding:0 12px;min-height:34px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.ac-pick b{ font-size:11.5px;color:var(--ink-soft);opacity:.75 }
.ac-pick:hover{ border-color:var(--teal);color:var(--ink) }
.ac-pick.is-on{
  background:var(--teal);border-color:var(--band,#164549);color:#fff;
  box-shadow:0 1px 6px rgba(31,100,104,.32);
}
.ac-pick.is-on b{ color:#fff;opacity:.85 }
.ac-pick.is-on:hover{ background:var(--band,#164549);color:#fff }
.ac-pick:focus-visible{ outline:2px solid var(--teal);outline-offset:2px }
.ac-pick.is-on:focus-visible{ outline-color:var(--band,#164549) }

.ac-empty{
  font-size:14px;color:var(--ink-soft);background:rgba(46,32,20,.05);
  border-radius:var(--r,12px);padding:16px;text-align:center;margin:18px 0;
}

/* ── קבוצות ── רצועה עדינה משלה לכל אחת ──────────────────────────── */
.ac-gh{ margin-top:40px !important;display:flex;align-items:center;gap:8px }
.ac-gh:first-of-type{ margin-top:26px !important }
.ac-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 7px;
  font-family:var(--font,'Noto Sans Hebrew',system-ui,sans-serif);
  font-size:12.5px;font-weight:700;color:#fff;background:var(--teal);
  border-radius:20px;
}
.g-group-sub[data-group]{ margin-bottom:14px }

.ac-grid{
  display:grid;grid-template-columns:1fr;gap:14px;align-items:start;
  margin:0 0 10px;padding:14px;border-radius:var(--r,12px);
}
.ac-band-inside{ background:rgba(31,100,104,.05) }
.ac-band-mostly{ background:rgba(138,100,20,.05) }
.ac-band-condition{ background:rgba(92,107,55,.06) }
@media (min-width:700px){ .ac-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .ac-grid{ grid-template-columns:repeat(3,1fr) } }

/* ── כרטיס ──────────────────────────────────────────────────────── */
/* align-self:start משלים את align-items:start על ה-grid: בלעדיהם התא
   נמתח לגובה השורה, וכרטיס פתוח אחד היה מנפח את כל שכניו. */
.ac-card{
  container-type:inline-size;
  align-self:start;
  display:flex;flex-direction:column;
  background:var(--paper-hi,#F9F1DD);
  border:1px solid rgba(196,168,118,.6);border-radius:var(--r,12px);
  padding:13px 14px 11px;
}
.ac-card[hidden]{ display:none }

.ac-top{ display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px }
.ac-heat{
  font-size:10.5px;font-weight:700;letter-spacing:.03em;color:#fff;
  border-radius:3px;padding:2px 8px;
}
.heat-in{ background:var(--teal) }
.heat-mostly{ background:var(--gold-deep,#8A6414) }
.heat-cond{ background:var(--olive,#5C6B37) }
.ac-vt{
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  color:var(--ink-soft);background:rgba(46,32,20,.07);
  border-radius:3px;padding:2px 8px;
}

.ac-name{
  font-family:var(--font-display,'Suez One',serif);
  font-size:18.5px;line-height:1.28;color:var(--sienna);margin:0 0 2px;
}
.ac-where{ font-size:12px;color:var(--ink-soft);margin:0 0 8px }

.ac-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;
  margin:0 0 2px;padding:8px 0 0;
  border-top:1px solid rgba(196,168,118,.45);
}
.ac-facts div{ min-width:0 }
/* התווית היא שלט, הערך הוא התשובה. משקל 500 וצבע רך יותר משאירים את
   התווית קריאה אך מדורגת מתחת לערך. הניגודיות נבדקה: #7A6647 על הרקע
   הבהיר עומד ב-AA לטקסט קטן. */
.ac-facts dt{ font-size:10.5px;font-weight:500;color:#7A6647;letter-spacing:.02em;margin:0 0 2px }
.ac-facts dd{ font-size:13px;font-weight:600;line-height:1.4;color:var(--ink);margin:0;overflow-wrap:anywhere }

/* אזור ההחלטה. מעט גדול יותר משורת הנתונים, כי כאן ההורה באמת קורא. */
.ac-line{ font-size:13.8px;line-height:1.55;color:var(--ink);margin:0 0 7px }
.ac-line b{ display:block;font-size:11.5px;font-weight:700;letter-spacing:.03em;margin:0 0 3px }
/* הפרדה בין הנתונים היבשים לבין ההסבר שעוזר לבחור */
.ac-good{ margin-top:0;padding-top:9px;border-top:1px solid rgba(196,168,118,.3) }
.ac-good b{ color:var(--teal) }
.ac-out b{ color:var(--sienna) }

.ac-more{ margin:0 0 7px;border-top:1px solid rgba(196,168,118,.45);padding-top:4px }
/* הטקסט והחץ הם יחידת לחיצה אחת, בגובה 44px, כדי שאפשר יהיה לפגוע בה
   באצבע. החץ גדול ובלי עיגול סביבו. */
.ac-more summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--teal);
  list-style:none;min-height:44px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;
}
.ac-more[open] .ac-chev{ transform:rotate(180deg) }
.ac-more summary:focus-visible{ outline:2px solid var(--teal);outline-offset:2px;border-radius:4px }

/* אזור הפרטים: כמה בלוקים קצרים בזה אחר זה, בעמודה אחת. */
.ac-detail{ margin:2px 0 8px;display:grid;gap:9px }
.ac-blk h4{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--teal);margin:0 0 4px;
}
.ac-blk ul{ margin:0;padding-inline-start:16px;display:grid;gap:3px }
.ac-blk li{ font-size:12.5px;line-height:1.5;color:var(--ink) }
.ac-place{ font-size:12.5px;line-height:1.5;color:var(--ink);margin:0 }
.ac-place b,.ac-caution b{ display:block;font-size:10.5px;letter-spacing:.04em;margin-bottom:2px }
.ac-place b{ color:var(--teal) }
.ac-caution{
  font-size:12px;line-height:1.5;color:var(--ink-soft);margin:0;
  background:rgba(156,63,22,.06);border-radius:8px;padding:7px 10px;
}
.ac-caution b{ color:var(--sienna) }
.ac-how-row{
  font-size:11px;line-height:1.5;color:#7A6647;margin:0;
  padding-top:7px;border-top:1px dotted rgba(196,168,118,.6);
}

/* margin-top:auto דחף את הקישורים לתחתית גם כשהכרטיס נמתח. מרגע
   שהכרטיסים אינם נמתחים, הם צריכים פשוט לשבת אחרי התוכן. */
/* פעולות. בלי קו תחתון — הצבע, המשקל והחץ נושאים את הסימון, וה-hover
   וה-focus משלימים אותו. הקו העליון מפריד אותן מהתוכן בלי רווח מיותר. */
.ac-links{ display:flex;flex-wrap:wrap;gap:4px 18px;
  padding-top:9px;border-top:1px solid rgba(196,168,118,.45);margin-top:3px }
.ac-links a{
  font-size:12.5px;font-weight:700;color:var(--sienna);text-decoration:none;
  min-height:32px;display:inline-flex;align-items:center;gap:4px;
  transition:color .15s ease;
}
.ac-links a::after{ content:'‹';font-size:13px;line-height:1;opacity:.7 }
.ac-links a:hover{ color:var(--sienna-deep) }
.ac-links a:hover::after{ opacity:1 }
.ac-links a:focus-visible{ outline:2px solid var(--sienna);outline-offset:3px;border-radius:3px }

.ac-foot{ font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:20px 0 0 }
.ac-foot a{ color:var(--sienna) }

/* ── מובייל ─────────────────────────────────────────────────────── */
@media (max-width:699px){
  /* הבחירות נגללות לרוחב במקום לדחוף את הכרטיס הראשון מטה */
  /* בלי bleed שלילי: הגלולה הראשונה מתחילה בקצה התוכן, כלומר 22px
     מדופן המסך, וזה נשמר בכל מצב גלילה. ב-RTL הדפדפן גולל מעבר ל-padding
     ולשוליים שבקצה ההתחלה, ולכן רווח שנשען עליהם פשוט נעלם. */
  .ac-picks-row{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .ac-picks-row::-webkit-scrollbar{ display:none }
  .ac-pick{ scroll-snap-align:start;flex:0 0 auto }
  .ac-grid{ padding:11px;gap:11px }
  .ac-links{ gap:6px 20px }
  .ac-links a{ min-height:34px;font-size:13px }
  .ac-gh{ margin-top:30px !important }
}
@media (max-width:360px){
  .ac-facts{ grid-template-columns:1fr;gap:5px }
  .ac-name{ font-size:17.5px }
}


/* ═══════════════════════════════════════════════════════════════
   מובייל — סבב ייעודי.
   הבעיה לא הייתה בפרטים אלא בכמה מסך צריך לגלול עד לכרטיס הראשון:
   624px של פתיח ב-390px רוחב, ובתוכו שני משפטים שאומרים כמעט אותו
   דבר. וגם: הבחירות המהירות נראו חתוכות ולא נגללות, והתג היה כבד
   יותר משם המקום.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:699px){

  /* ── פתיח קצר יותר ── */
  .ac-page h1{ font-size:25px;line-height:1.25;margin-bottom:7px }
  .ac-page .g-index-sub{ font-size:15px;line-height:1.55;margin-bottom:8px }
  /* שורת האמון חוזרת כמעט מילה במילה על שורת המשנה. בדסקטופ יש מקום
     לשתיהן; במסך של 390px זו פשוט גלילה מיותרת. */
  .ac-trust{ display:none }
  .ac-updated{ font-size:12px;margin:0 0 12px }
  .ac-how{ margin-bottom:10px }
  .ac-how summary{ min-height:38px }

  /* ── הבחירות נגללות, ולא נחתכות ──
     דהייה בקצה אומרת לעין שיש עוד, במקום גלולה שנקטעת באמצע. */
  .ac-picks{ margin-bottom:4px }
  .ac-picks-row{
    /* הדהייה יושבת על קצה הגלילה בלבד ומרמזת שיש המשך */
    -webkit-mask-image:linear-gradient(to left,#000 86%,transparent 100%);
            mask-image:linear-gradient(to left,#000 86%,transparent 100%);
  }
  /* והגלולה האחרונה לא נדבקת לדופן השמאלית בסוף הגלילה */
  .ac-pick:last-child{ margin-inline-end:16px }
  .ac-pick{ font-size:12.5px;min-height:32px;padding:0 11px }

  /* ── סדר הכרטיס במובייל ──
     ההורה מחפש קודם כול מקום, ורק אחר כך את המאפיינים שלו. ה-DOM נשאר
     כפי שהוא (התגים ראשונים) והסדר החזותי נקבע ב-order, כדי לא לגעת
     בדסקטופ. הערה: קורא מסך ימשיך לקרוא לפי סדר ה-DOM. */
  .ac-name  { order:1 }
  .ac-where { order:2 }
  .ac-top   { order:3 }
  .ac-facts { order:4 }
  .ac-good  { order:5 }
  .ac-out   { order:6 }
  .ac-more  { order:7 }
  .ac-links { order:8 }
  .ac-name{ margin-bottom:2px }
  .ac-where{ margin-bottom:8px }

  /* ── בכרטיס: קודם השם, אחר כך התג ──
     התג היה מלבן מלא בטורקיז כהה ליד שם בגודל 18.5px, ומשך את העין
     ראשון. עכשיו הוא מתואר בקו והשם גדל. */
  .ac-name{ font-size:20px;line-height:1.25 }
  .ac-top{ margin-bottom:7px;gap:4px }
  .ac-heat{
    background:transparent;padding:1px 7px;
    border:1.5px solid currentColor;border-radius:4px;
  }
  .heat-in{ color:var(--teal) }
  .heat-mostly{ color:var(--gold-deep,#8A6414) }
  .heat-cond{ color:var(--olive,#5C6B37) }
  .ac-vt{ background:transparent;border:1px solid rgba(46,32,20,.22);color:var(--ink-soft) }

  /* ── שורת הנתונים ──
     שתי עמודות צרות עם תווית מעל ערך גרמו לכל ערך לגלוש לשתיים-שלוש
     שורות: 144px לארבע עובדות. תווית וערך באותה שורה חוסכים כמחצית. */
  .ac-facts{
    display:grid;grid-template-columns:auto 1fr;gap:4px 10px;
    padding:7px 0 0;margin-bottom:8px;
  }
  .ac-facts > div{ display:contents }
  .ac-facts dt{ margin:0;align-self:baseline;white-space:nowrap }
  .ac-facts dd{ font-size:12.5px;align-self:baseline }

  .ac-card{ padding:12px 13px 10px }
  .ac-line{ margin-bottom:6px }
  .ac-detail{ gap:8px }
  .ac-blk li{ line-height:1.45 }
}