/* Ανετοί χώροι για εικόνες, χωρίς μεταβολή της σειράς των επιλογών. */
body.visual-refresh .age-first-visit,
body.visual-refresh .age-first-visit .age-intro { width: 100%; min-width: 0; }
body.visual-refresh .age-card,
body.visual-refresh .age-card-art { min-width: 0; }
body.visual-refresh .age-card .age-card-art > .age-garden-picture {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  padding: 0; display: block;
}

/* Υπολογιστής: οι τέσσερις ηλικίες στην ίδια σειρά, με μεγάλες εικόνες. */
@media (min-width: 1160px) {
  body.visual-refresh .age-first-visit { max-width: 1450px; }
  body.visual-refresh .age-first-visit .age-intro { max-width: 1450px; }
  body.visual-refresh .age-first-visit .age-grid {
    display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.45vw, 24px); margin-block: 22px 24px;
    overflow: visible;
  }
  body.visual-refresh .age-first-visit .age-card {
    display: flex; flex-direction: column; padding: clamp(13px, 1.15vw, 19px);
    width: 100%; min-width: 0; overflow: hidden;
  }
  body.visual-refresh .age-first-visit .age-card-art {
    width: 100%; min-height: 0; max-height: none; aspect-ratio: 1 / 1;
    border-radius: 18px; margin-bottom: 14px;
  }
  body.visual-refresh .age-first-visit .age-card strong { min-height: 0; font-size: clamp(1.12rem, 1.37vw, 1.42rem); }
  body.visual-refresh .age-first-visit .age-card small { font-size: clamp(.78rem, .91vw, .92rem); }
}

/* Εμφανής επιλογή τεσσάρων ηλικιών μέσα στο παράθυρο του υπολογιστή. */
@media (min-width: 1024px) {
  body.visual-refresh dialog.age-dialog {
    width: min(1200px, calc(100vw - 52px)) !important;
    max-width: calc(100vw - 52px) !important; padding: clamp(18px, 1.9vw, 28px) !important;
    max-height: calc(100dvh - 24px); overflow-x: hidden;
  }
  body.visual-refresh dialog.age-dialog .age-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(9px, 1vw, 17px); margin: 16px 0 14px; overflow: visible;
  }
  body.visual-refresh dialog.age-dialog .age-card {
    display: flex; flex-direction: column; width: 100%; padding: clamp(10px,1.15vw,15px);
    min-width: 0; gap: 0; overflow: hidden;
  }
  body.visual-refresh dialog.age-dialog .age-card-art {
    width: 100%; height: auto; min-height: 0; max-height: min(26dvh, 230px);
    aspect-ratio: 1 / 1; margin: 0 0 10px;
  }
  body.visual-refresh dialog.age-dialog .age-card strong { font-size: clamp(1.08rem,1.23vw,1.3rem); min-height: 0; }
  body.visual-refresh dialog.age-dialog .age-card small { display: block; font-size: clamp(.72rem,.82vw,.86rem); line-height: 1.45; }
  body.visual-refresh dialog.age-dialog .age-card-count { padding-top: 10px; }
  body.visual-refresh dialog.age-dialog #dialog-body > p { margin: 6px 0 11px; }
}
@media (min-width: 1024px) and (max-height: 710px) {
  body.visual-refresh dialog.age-dialog { padding: 13px 18px !important; }
  body.visual-refresh dialog.age-dialog .age-grid { margin-block: 9px; gap: 10px; }
  body.visual-refresh dialog.age-dialog .age-card { padding: 9px; }
  body.visual-refresh dialog.age-dialog .age-card-art { max-height: min(21dvh, 160px); margin-bottom: 6px; }
  body.visual-refresh dialog.age-dialog .age-card small { font-size: .73rem; line-height: 1.35; margin-top: 6px; }
}

/* Τάμπλετ και μικρότεροι υπολογιστές: δύο ευρύχωρες στήλες στην αρχική. */
@media (min-width: 650px) and (max-width: 1159px) {
  body.visual-refresh .age-first-visit .age-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
  }
  body.visual-refresh .age-first-visit .age-card { display: flex; flex-direction: column; min-width: 0; }
  body.visual-refresh .age-first-visit .age-card-art {
    width: 100%; aspect-ratio: 16 / 11; min-height: 0; max-height: none; margin: 0 0 12px;
  }
}
@media (min-width: 650px) and (max-width: 1023px) {
  body.visual-refresh dialog.age-dialog .age-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px;
  }
  body.visual-refresh dialog.age-dialog .age-card {
    display: flex; flex-direction: column; min-width: 0; padding: 12px;
  }
  body.visual-refresh dialog.age-dialog .age-card-art {
    flex: none; width: 100%; height: auto; aspect-ratio: 16 / 11;
    min-height: 0; max-height: 180px; margin: 0 0 11px;
  }
}

/* Τηλέφωνο: οι τέσσερις συλλογές έχουν ευανάγνωστες, φαρδιές κάρτες. */
@media (max-width: 649px) {
  body.visual-refresh .age-first-visit .age-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  body.visual-refresh .age-first-visit .age-card {
    display: grid; grid-template-columns: clamp(100px,30vw,145px) minmax(0,1fr);
    grid-template-areas: "art num" "art title" "art desc" "art count";
    column-gap: 13px; align-items: center; min-width: 0;
  }
  body.visual-refresh .age-first-visit .age-card-art {
    grid-area: art; aspect-ratio: 1 / 1; min-height: 0; max-height: none;
    width: 100%; margin: 0; border-radius: 14px;
  }
  body.visual-refresh .age-first-visit .age-card .age-number { grid-area: num; justify-self: start; }
  body.visual-refresh .age-first-visit .age-card strong { grid-area: title; font-size: clamp(1.03rem,4.1vw,1.32rem); }
  body.visual-refresh .age-first-visit .age-card small { grid-area: desc; font-size: .78rem; line-height: 1.45; }
  body.visual-refresh .age-first-visit .age-card-count { grid-area: count; padding-top: 5px; font-size: .72rem; }
  /* Το παράθυρο ηλικιών χρησιμοποιεί δύο σειρές αντί για μακρύ κατάλογο. */
  body.visual-refresh dialog.age-dialog .age-grid,
  body.visual-refresh.large-text dialog.age-dialog .age-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px; margin: 12px 0; padding: 2px;
  }
  body.visual-refresh dialog.age-dialog .age-card {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; padding: 9px; min-width: 0;
  }
  body.visual-refresh dialog.age-dialog .age-card-art {
    flex: none; width: 100%; height: auto; aspect-ratio: 1 / 1;
    max-height: min(15dvh, 115px); min-height: 0; margin: 0 0 7px;
  }
  body.visual-refresh dialog.age-dialog .age-number { margin-bottom: 4px; font-size: .72rem; }
  body.visual-refresh dialog.age-dialog .age-card strong { font-size: clamp(.95rem,3.7vw,1.09rem); line-height: 1.2; }
  body.visual-refresh dialog.age-dialog .age-card small { display: block; font-size: .71rem; line-height: 1.33; margin-top: 5px; }
  body.visual-refresh dialog.age-dialog .age-card-count { padding-top: 6px; font-size: .68rem; }
}
@media (max-width: 359px) {
  body.visual-refresh .age-first-visit .age-card {
    grid-template-columns: 92px minmax(0,1fr); column-gap: 9px; padding: 10px;
  }
  body.visual-refresh dialog.age-dialog .age-card { padding: 7px; }
  body.visual-refresh dialog.age-dialog .age-card small { display: none; }
}

/* Μεγαλύτερες καθαρές ζωγραφιές μέσα στα ανοιχτά παραμύθια. */
@media (min-width: 1180px) {
  #parea-story-player { width: min(1560px, calc(100vw - 44px)); max-width: calc(100vw - 44px); }
  #parea-story-player .story-player-main {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(18px, 2.1vw, 42px);
  }
  #parea-story-player .story-picture-grid { min-height: 395px; gap: 12px; padding: 23px 18px 46px; }
  #parea-story-player .story-picture-grid figure { flex: 1 1 44%; max-width: min(48%, 355px); min-height: 250px; }
  #parea-story-player .story-picture-grid figure:only-of-type { flex-basis: 100%; max-width: min(100%, 485px); }
  #parea-story-player .story-picture-grid svg { display: block; width: 100%; height: auto; max-height: 320px; }
}
@media (min-width: 901px) and (max-width: 1179px) {
  #parea-story-player .story-picture-grid figure { max-width: min(48%,260px); min-height: 185px; }
  #parea-story-player .story-picture-grid svg { max-height: 230px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  #parea-story-player .story-picture-grid { min-height: 265px; }
  #parea-story-player .story-picture-grid figure { max-width: min(46%, 285px); }
  #parea-story-player .story-picture-grid svg { max-height: 240px; }
}
@media (max-width: 470px) {
  #parea-story-player .story-picture-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #parea-story-player .story-picture-grid figure:only-of-type { grid-column: 1/-1; justify-self: center; width: min(100%, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .age-card, .story-hub-card, #parea-story-player .story-picture-grid figure { animation: none!important; transition: none!important; }
}
@media print { .age-first-visit .age-card-art, #parea-story-player .story-picture-grid { break-inside: avoid; } }