/* ===================================================================
   Mobile layer.

   Every rule in this file lives inside a media query, so the desktop
   rendering cannot be affected by anything here. Loaded after style.css
   and archive.css.
   =================================================================== */

@media (max-width: 780px) {

  /* ---------------- footer ----------------
     Links stack one per line, centred, and the credits sit under them
     on their own lines rather than running together. */
  .site-footer .footer-links > ul {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .site-footer .footer-links a { display: block; }

  .site-footer .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    line-height: 1.6;
  }
  /* the credit breaks onto its own line: designer above, copyright below */
  .site-footer .footer-bottom > span { display: block; }
  .site-footer .credit .by,
  .site-footer .credit .cr { display: block; }
  .site-footer .credit .sep { display: none; }

  .site-footer .footer-main {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
  }
  .site-footer .footer-socials { justify-content: center; }
}

@media (max-width: 780px) {

  /* ---------------- horizontal overflow ----------------
     Two causes, fixed at the source rather than clipped with
     overflow:hidden, which would only hide the symptom.

     1. the search overlay carried a fixed-width input
     2. multi-column grids and the 300px rails never collapsed          */

  .search-panel, .search-panel .wrap { width: 100%; max-width: 100%; }
  .search-panel input,
  .search-panel form { width: 100%; max-width: 100%; min-width: 0; }

  /* every rail becomes a normal block in the flow */
  .rail, .archive-rail, .cat-rail, .article-rail, .culture-rail, .paired-rail {
    position: static;
    width: 100%; max-width: 100%;
  }

  /* grids collapse to one column */
  .hero,
  .hero-under,
  .with-rail,
  .cat-body,
  .archive-body,
  .article-body,
  .article-inner,
  .paired-body,
  .contact-body,
  .culture-top,
  .tourism-body,
  .ed-top,
  .cat-lead,
  .cat-duo,
  .topika-hero,
  .sports-hero,
  .feature-list,
  .newsletter .wrap {
    grid-template-columns: 1fr !important;
  }

  /* two-up where a single column would waste the width */
  .grid-lined,
  .cat-three,
  .cat-six,
  .cat-grid,
  .cat-grid.full,
  .also-grid,
  .ed-grid,
  .culture-grid,
  .divided-grid,
  .env-grid,
  .sports-grid,
  .people-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* the ruled dividers between cards make no sense once stacked */
  .grid-lined .card::before,
  .grid-lined .card:not(:nth-child(3n)),
  .divided .card + .card::before,
  .culture-grid .card:not(:nth-child(3n)),
  .ed-grid .ed-card:not(:last-child)::after,
  .grid.ruled .card:not(:last-child)::after,
  .sports-grid .card:not(:last-child) {
    border-right: 0;
  }
  .grid-lined .card, .culture-grid .card, .ed-grid .ed-card,
  .grid.ruled .card, .sports-grid .card { padding-left: 0; padding-right: 0; }

  /* nothing may exceed the viewport */
  img, video, iframe, table { max-width: 100%; height: auto; }
  .wrap { max-width: 100%; }
  .print-widgets, .print-widgets .paper { width: 100%; max-width: 100%; }

  /* ---------------- ΑΓΟΡΑ ----------------
     Two cards per row, image over headline, with the section link beneath. */
  .section.market .grid,
  .section.market .grid-4,
  .section.market .grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 18px;
  }
  .section.market .card h3 { font-size: 15px; line-height: 1.32; }
  .section.market .see-more-row { margin-top: 22px; }
}

@media (max-width: 780px) {
  /* Remaining fixed-width blocks. The search and drawer overlays measured
     wide only because the document itself was — they follow once these
     stop forcing it open. */
  .section.tourism .tourism-body,
  .section.tourism .tourism-list .row a,
  .section.world .world-top,
  .section.world .world-rest,
  .section.world .wrow a,
  .list-stack .row,
  .lead,
  .section.people .wrow a,
  .news-list .nrow,
  .result,
  .post,
  .widget .wrow {
    grid-template-columns: 1fr !important;
  }
  /* thumbnail-beside-text rows keep two columns, just narrower */
  .list-stack .row,
  .news-list .nrow,
  .result,
  .section.world .wrow a,
  .widget .wrow {
    grid-template-columns: 116px 1fr !important;
    gap: 14px;
  }
  .post { grid-template-columns: 104px 1fr !important; gap: 16px; }
  .post .portrait img { width: 104px; height: 104px; }

  .section.tourism .tourism-list { padding-left: 0; }
  .section.tourism .tourism-list::before { display: none; }

  .carousel-track,
  .carousel-track.faces,
  .carousel-track.people-track { grid-auto-columns: 78% !important; }

  .covers-grid { grid-template-columns: 1fr 1fr !important; }
  .field-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 780px) {
  /* The search bar's minimum width came from its own furniture — the
     magnifier, the word "Αναζήτηση" and the close button side by side.
     Tighten them so the row fits a phone. */
  .search-panel .wrap { gap: 10px; padding-inline: 16px; padding-block: 16px; }
  .search-panel .glass svg { width: 22px; height: 22px; }
  .search-panel input { font-size: 17px; }
  .search-panel .submit { display: none; }      /* the keyboard's Go key submits */
  .search-panel .close { font-size: 28px; }
}

@media (max-width: 780px) {
  /* The breaking ticker is a marquee: its items deliberately sit past the
     edge and animate through, so the track clips them. Without this the
     document itself stretched to the width of the queued headlines. */
  .breaking { overflow: hidden; }
  .breaking .wrap { overflow: hidden; max-width: 100%; }
  .breaking .bk-track { min-width: 0; }
  .breaking .bk-item { max-width: 100%; }
}

@media (max-width: 780px) {
  /* The field kept its intrinsic size (a text input is ~20 characters wide
     by default), so the row could never shrink below it. */
  .search-panel input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  /* ---------------- sticky header ----------------
     Once the header compacts, the nav row is dropped — the drawer is the
     way into the sections on a phone. */
  .site-header.stuck .main-nav,
  .site-header.stuck .nav-wrap { display: none; }
}

@media (max-width: 780px) {
  /* The bar laid the flag, the dots and the headline track side by side,
     all flex:none — together wider than a phone. Stack the flag above the
     headline and drop the dots; the ticker still rotates on its own. */
  .breaking .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-block: 10px;
  }
  .breaking .flag { flex: none; gap: 10px; }
  .breaking .flag-text { flex-direction: row; align-items: baseline; gap: 8px; }
  .breaking .bk-dots,
  .breaking .sep { display: none; }
  .breaking .bk-track { width: 100%; min-width: 0; }
  .breaking .bk-item { max-width: 100%; }
  .breaking .bk-item h2 {
    font-size: 14px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}

@media (max-width: 780px) {
  /* Long section titles (ΣΥΝΕΝΤΕΥΞΕΙΣ-ΠΡΟΣΩΠΑ, ΚΑΛΑΜΑΤΙΑΝΟΙ ΤΟΥ
     ΕΞΩΤΕΡΙΚΟΥ) are single unbreakable words on a flex row, so they pushed
     straight through the container and set the page width. Let the head
     wrap and the title break. */
  .section-head { flex-wrap: wrap; row-gap: 8px; }
  .section-head h2,
  .cat-head h1,
  .archive-head h1,
  .also-head h2 {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1.2;
  }
  .section-head .rule,
  .cat-head .rule,
  .archive-head .rule,
  .also-head .rule { min-width: 20px; }
}

@media (max-width: 780px) {
  /* ---------------- section heads ----------------
     The mark and the title share a baseline, and the rule takes whatever
     is left. Wrapping stays available for the long titles, but short ones
     keep the mark, the words and the rule on one tidy line. */
  .section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .section-head .mark,
  .section-head .mark.lg {
    width: 30px; height: 30px; flex: none;
  }
  .section-head h2 {
    flex: 0 1 auto;
    margin: 0;
    line-height: 1.15;
    font-size: clamp(16px, 4.6vw, 21px);
  }
  .section-head .rule { flex: 1 1 auto; min-width: 16px; }

  /* the two long ones are allowed to break onto a second line */
  .section.people .section-head,
  .section.abroad .section-head { flex-wrap: wrap; }

  /* ---------------- ΑΓΟΡΑ ----------------
     Keeps its warm field; two cards per row, and the section link sits
     under the left-hand column. */
  .section.agora .grid,
  .section.agora .grid-3,
  .section.agora .grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px;
  }
  .section.agora .card h3 {
    font-size: 14.5px; line-height: 1.32;
    height: auto;
    -webkit-line-clamp: 4;
  }
  .section.agora .card .meta { font-size: 11.5px; }
  .section.agora .see-more-row,
  .section.agora .see-more {
    justify-self: start;
    text-align: left;
    margin-left: 0;
  }
  .section.agora .see-more-row { display: flex; justify-content: flex-start; }
}

@media (max-width: 780px) {
  /* The warm field is a gradient that fades to cream at 78% — sized for a
     single row of cards. Stacked two-by-two the section is twice as tall,
     so the colour ran out halfway. Hold it to the end instead. */
  .section.agora {
    background: linear-gradient(180deg, #f7e7b8 0%, #f8eed3 45%, #f8eed3 100%);
    padding: 26px 0 32px;
  }

  /* Only the first card carried a "see more", which lands top-left once the
     row splits in two. A section-level link under the grid reads better. */
  .section.agora .card .see-more { display: none; }
  .section.agora .agora-more { display: flex; justify-content: flex-start; margin-top: 4px; }

  /* Padding inside a clamped -webkit-box lets the next line peek through,
     so the box keeps its lines and the spacing moves to the link above it. */
  .section.agora .card h3 {
    height: auto;
    -webkit-line-clamp: 4;
    padding-bottom: 0;
  }
  .section.agora .card > a:first-child { padding-bottom: 12px; }
}

@media (max-width: 780px) {
  /* ---------------- ΠΙΟ ΔΙΑΒΑΣΜΕΝΑ ----------------
     The arrows sit in the section head, which crowds the title on a narrow
     screen. The wrap is the positioning context, so they drop to the foot
     and share that line with the "see more" link. */
  .section.mostread .wrap { position: relative; padding-bottom: 8px; }
  .section.mostread .section-head .arrows {
    position: absolute;
    right: var(--pad, 20px);
    bottom: 8px;
    display: flex;
    gap: 10px;
    margin: 0;
  }
  .section.mostread .section-head .arrows button {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--navy); color: var(--navy);
    background: transparent;
    display: grid; place-items: center;
    font-size: 18px; line-height: 1;
    padding: 0;
  }
  .section.mostread .section-head .arrows button:hover,
  .section.mostread .section-head .arrows button:active {
    background: var(--navy); color: var(--cream);
  }
  /* keep the link clear of the arrows */
  .section.mostread .see-more-row { padding-right: 96px; min-height: 36px; display: flex; align-items: center; }

  /* ---------------- ΑΓΟΡΑ → newsletter ----------------
     The warm section ended with padding and the newsletter added its own
     top margin, leaving a cream strip between the two bands. */
  .section.agora { padding-bottom: 22px; margin-bottom: 0; }
  .section.agora + .newsletter,
  .newsletter { margin-top: 0; }
}

@media (max-width: 780px) {
  /* ---------------- tile carousels (ΚΑΛΑΜΑΤΙΑΝΟΙ, VIDEOS) ----------------
     Two tiles in view, and the arrows drop out of the sides — where they
     covered the artwork — to sit centred beneath the row. */
  .abroad .carousel,
  .section.videos .carousel {
    padding-inline: 0;
    padding-bottom: 62px;      /* room for the arrows underneath */
  }
  .abroad .carousel-track.tiles,
  .section.videos .carousel-track {
    grid-auto-columns: calc((100% - 14px) / 2) !important;
    gap: 14px;
  }
  .abroad .tile img,
  .section.videos .tile img,
  .section.videos .vcard img {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }
  .abroad .tile h3,
  .section.videos h3 { font-size: 14px; line-height: 1.3; }

  .abroad .carousel .nav,
  .section.videos .carousel .nav {
    top: auto; bottom: 0;
    transform: none;
    width: 42px; height: 42px;
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
  }
  .abroad .carousel .nav:active,
  .section.videos .carousel .nav:active { transform: scale(.94); }
  /* centred as a pair, one either side of the midline */
  .abroad .carousel .nav.prev,
  .section.videos .carousel .nav.prev { left: 50%; margin-left: -50px; right: auto; }
  .abroad .carousel .nav.next,
  .section.videos .carousel .nav.next { left: 50%; margin-left: 8px; right: auto; }
}

@media (max-width: 780px) {
  /* ---------------- ΣΥΝΕΝΤΕΥΞΕΙΣ-ΠΡΟΣΩΠΑ ----------------
     No carousel on a phone: the cards stack and the row is capped at four,
     so the section stays a readable length. */
  .section.people .carousel { padding-inline: 0; padding-bottom: 0; }
  .section.people .carousel .nav { display: none; }

  .section.people .carousel-track.people-track {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr !important;
    gap: 60px;                       /* clears the overhanging portrait */
    overflow: visible;
    scroll-snap-type: none;
  }
  /* only the first four make the cut */
  .section.people .people-track .person:nth-child(n+5) { display: none; }

  .section.people .person { padding-top: 62px; }
  .section.people .person-body { min-height: 0; padding: 74px 20px 24px; }
  .section.people .person h3 { height: auto; -webkit-line-clamp: 3; }
}

@media (max-width: 780px) {
  /* ---------------- ΑΠΟΨΕΙΣ ----------------
     Same treatment as the interviews: no carousel, four stacked cards. */
  .section.opinions .carousel { padding-inline: 0; }
  .section.opinions .carousel .nav { display: none; }
  .section.opinions .carousel-track.faces {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr !important;
    gap: 34px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .section.opinions .faces .face:nth-child(n+5) { display: none; }

  /* rows: portrait left, byline and headline right, hairline between */
  .section.opinions .carousel-track.faces { gap: 0; }
  .section.opinions .face {
    text-align: left;
    padding: 16px 0;
    border-bottom: 1px solid #d9e2ea;
  }
  .section.opinions .face > a {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 16px;
    align-items: start;
  }
  .section.opinions .face img {
    width: 78px; height: 78px;
    grid-column: 1; grid-row: 1 / span 3;
    margin: 0;
  }
  .section.opinions .face h3 {
    grid-column: 2; grid-row: 1;
    font-size: 15.5px; line-height: 1.35; text-align: left;
  }
  .section.opinions .face .meta {
    grid-column: 2; grid-row: 2;
    margin-top: 8px; font-size: 12px; text-align: left;
  }

  /* ---------------- ΥΓΕΙΑ ----------------
     Five across on the desktop; the phone shows a tidy 2x2. */
  .section.divided.cols-5 .divided-grid .card:nth-child(n+5) { display: none; }

  /* ---------------- ΥΠΟΔΟΜΕΣ ----------------
     The section ships three cards; a fourth is carried in the markup for
     the phone only, so the desktop row stays as it was. */
  .mobile-only { display: block; }
  .section.infra .grid,
  .section.infra .grid-3,
  .section.infra .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 24px 16px; }
  .section.infra .card h3 { height: auto; -webkit-line-clamp: 4; font-size: 14.5px; }
}

@media (max-width: 780px) {
  /* ---------------- ΚΑΛΑΜΑΤΙΑΝΟΙ ----------------
     One tile at a time, tall enough for the photograph to carry itself. */
  .abroad .carousel-track.tiles {
    grid-auto-columns: 100% !important;
    gap: 0;
  }
  .abroad .tile img { aspect-ratio: 3 / 4; min-height: 0; max-height: 78vh; }
  .abroad .tile h3 { font-size: 19px; line-height: 1.28; }
  .abroad .tile .meta { font-size: 13px; }

  /* VIDEOS keeps the pair, but the section had a deep tail of empty colour
     under the arrows before the next block began. */
  .section.videos { padding-bottom: 18px; }
  .section.videos .carousel { padding-bottom: 58px; }

  /* banners read as real inventory, not slivers */
  .ad-banner,
  .ad[data-ad-size="970x250"] { min-height: 280px; }
  .wrap > .ad-banner { margin-block: 18px; }
}

@media (max-width: 780px) {
  /* The track already snapped on the x axis, but no child declared where to
     stop, so a swipe could settle between two tiles. */
  .abroad .carousel-track { scroll-snap-type: x mandatory; }
  .abroad .carousel-track > * { scroll-snap-align: start; scroll-snap-stop: always; }
  .section.videos .carousel-track { scroll-snap-type: x mandatory; }
  .section.videos .carousel-track > * { scroll-snap-align: start; }

  /* ---------------- ΚΟΣΜΟΣ ----------------
     The white band sat inside the page gutter, leaving cream down each
     side. On a phone it runs edge to edge. */
  .section.world .world-band {
    margin-inline: calc(var(--pad, 20px) * -1);
    padding: 0 16px 22px;
    margin-top: 40px;
  }
  .section.world .world-top .thumb { margin-top: -26px; }
  .section.world .wcard h3 { font-size: 16px; }
  .section.world .wrow a { grid-template-columns: 104px 1fr !important; gap: 12px; }
}

@media (max-width: 780px) {
  /* ΑΓΡΟΤΙΚΑ / ΑΘΛΗΤΙΚΑ: the four cards under the lead sit two by two.
     Their dividing hairlines and side padding come off once stacked. */
  .section.editorial .ed-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 16px;
  }
  .section.editorial .ed-grid .ed-card { padding: 0; }
  .section.editorial .ed-grid .ed-card::after { display: none; }
  .section.editorial .ed-grid .ed-card img { aspect-ratio: 16 / 10; margin-bottom: 10px; }
  .section.editorial .ed-grid h3 {
    font-size: 14.5px; line-height: 1.32;
    height: auto; -webkit-line-clamp: 4;
  }
  .section.editorial .ed-grid .excerpt { display: none; }

  /* the lead spread stacks: headline, then photo, then the side card */
  .section.editorial .ed-top { gap: 18px; }
  .section.editorial .ed-side { margin-top: 4px; }
}

@media (max-width: 780px) {
  /* ---------------- rails in the flow ----------------
     A rail holds two or three slots side by side with the content. Once it
     drops into the flow they stack into a wall of advertising, so only the
     first is kept on a phone. */
  .rail .ad ~ .ad,
  .paired-rail .ad ~ .ad,
  .archive-rail .ad ~ .ad,
  .cat-rail .ad ~ .ad,
  .article-rail .ad ~ .ad,
  .culture-rail .ad ~ .ad { display: none; }

  /* ---------------- ΑΣΤΥΝΟΜΙΚΑ ----------------
     A full-width lead card, then three rows of two. */
  .section.paired .paired-part:first-child .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px;
  }
  .section.paired .paired-part:first-child .card:first-child {
    grid-column: 1 / -1;
  }
  .section.paired .paired-part:first-child .card:first-child h3 { font-size: 19px; line-height: 1.28; }
  .section.paired .paired-part:first-child .card:first-child img { aspect-ratio: 16 / 9; }

  /* ---------------- ΔΙΚΑΣΤΙΚΟ ----------------
     Its cards run one under the other. */
  .section.paired .paired-part:last-child .grid {
    grid-template-columns: 1fr !important;
    gap: 26px;
  }
  .section.paired .card h3 { height: auto; -webkit-line-clamp: 4; font-size: 15px; }
}

@media (max-width: 780px) {
  /* ---------------- ΕΛΛΑΔΑ ----------------
     The ruled grid ran with no row gap and cards of a fixed height, so a
     long headline overflowed visibly onto the row beneath it. Cards size to
     their content and titles clamp instead of spilling. */
  .grid.ruled {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 16px;
    align-items: start;
  }
  .grid.ruled .card {
    height: auto;
    padding: 0;
    border-right: 0;
  }
  .grid.ruled .card::after { display: none; }
  .grid.ruled .card h3 {
    height: auto;
    font-size: 14.5px; line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .grid.ruled .card .thumb img { aspect-ratio: 16 / 10; object-fit: cover; }
  .grid.ruled .card .meta { font-size: 11.5px; margin: 8px 0 4px; }
}

@media (max-width: 780px) {
}

@media (max-width: 780px) {
  /* ---------------- ΑΘΛΗΤΙΚΑ ----------------
     Reads like ΠΟΛΙΤΙΣΤΙΚΑ on a phone: one lead, then three compact rows
     with the thumbnail on the right, all on a cool tinted panel. */
  .section.editorial.sports-ed {
    background: #eef1f6;
    padding: 26px 0 30px;
  }

  .section.editorial.sports-ed .ed-top { gap: 14px; }
  .section.editorial.sports-ed .ed-hero { order: 1; }
  .section.editorial.sports-ed .ed-lead { order: 2; }
  .section.editorial.sports-ed .ed-side { order: 3; display: none; }
  .section.editorial.sports-ed .ed-hero img { aspect-ratio: 4 / 3; }
  .section.editorial.sports-ed .ed-lead h3 { font-size: 19px; line-height: 1.3; }

  .section.editorial.sports-ed .ed-rule { margin: 18px 0 6px; }

  /* three rows, thumbnail right */
  .section.editorial.sports-ed .ed-grid {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .section.editorial.sports-ed .ed-grid .ed-card:nth-child(n+4) { display: none; }
  .section.editorial.sports-ed .ed-grid .ed-card {
    padding: 16px 0;
    border-bottom: 1px solid #d5dae3;
  }
  .section.editorial.sports-ed .ed-grid .ed-card > a {
    display: grid;
    grid-template-columns: 1fr 118px;
    gap: 14px;
    align-items: start;
  }
  .section.editorial.sports-ed .ed-grid .ed-card img {
    grid-column: 2; grid-row: 1 / span 2;
    aspect-ratio: 4 / 3; margin: 0;
  }
  .section.editorial.sports-ed .ed-grid .ed-card h3 {
    grid-column: 1; grid-row: 1;
    font-size: 15px; line-height: 1.35;
    height: auto; -webkit-line-clamp: 3;
  }
  .section.editorial.sports-ed .ed-grid .ed-card .meta {
    grid-column: 1; grid-row: 2;
    margin: 8px 0 0; font-size: 11.5px;
  }
}

@media (max-width: 780px) {
  /* ---------------- rail slots on a phone ----------------
     A 300x600 skyscraper is a desktop shape; dropped into the flow it
     becomes a wall the reader has to scroll past. Rail slots render at a
     phone-sized box instead. */
  .rail .ad,
  .paired-rail .ad,
  .archive-rail .ad,
  .cat-rail .ad,
  .article-rail .ad,
  .culture-rail .ad {
    min-height: 0;
    height: 200px;
    max-width: 336px;
    margin-inline: auto;
  }
  .rail .ad[data-ad-size="300x600"],
  .paired-rail .ad[data-ad-size="300x600"],
  .archive-rail .ad[data-ad-size="300x600"],
  .cat-rail .ad[data-ad-size="300x600"],
  .article-rail .ad[data-ad-size="300x600"] { height: 200px; }

  /* ---------------- ΥΠΟΔΟΜΕΣ ----------------
     One lead, then three rows with the thumbnail on the right. */
  .section.infra .grid,
  .section.infra .grid-3,
  .section.infra .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .section.infra .card { padding: 16px 0; border-bottom: 1px solid #ddd8d2; }
  .section.infra .card > a { display: grid; grid-template-columns: 1fr 118px; gap: 14px; align-items: start; }
  .section.infra .card .thumb { grid-column: 2; grid-row: 1 / span 3; }
  .section.infra .card .thumb img { aspect-ratio: 4 / 3; object-fit: cover; }
  .section.infra .card h3 { grid-column: 1; order: 1; font-size: 15px; line-height: 1.35; height: auto; -webkit-line-clamp: 3; }
  .section.infra .card .meta { grid-column: 1; order: 2; margin-top: 8px; font-size: 11.5px; }

  /* the first is the lead: full-width photo above its headline */
  .section.infra .card:first-child { padding-top: 0; }
  .section.infra .card:first-child > a { display: block; }
  .section.infra .card:first-child .thumb img { aspect-ratio: 4 / 3; width: 100%; }
  .section.infra .card:first-child h3 { font-size: 19px; line-height: 1.3; margin-top: 12px; -webkit-line-clamp: 4; }
  .section.infra .card:first-child .meta { margin-top: 10px; }
}

@media (max-width: 780px) {
  /* ---------------- ΑΘΛΗΤΙΚΑ: dark panel ----------------
     Navy field with white type, per the reference. */
  .section.editorial.sports-ed { background: #131a3a; }
  .section.editorial.sports-ed .section-head h2,
  .section.editorial.sports-ed .ed-lead h3,
  .section.editorial.sports-ed .ed-lead h3 a,
  .section.editorial.sports-ed .ed-grid h3,
  .section.editorial.sports-ed .ed-grid h3 a { color: #fff; }
  .section.editorial.sports-ed .meta { color: rgba(255,255,255,.6); }
  .section.editorial.sports-ed .ed-rule,
  .section.editorial.sports-ed .ed-grid .ed-card { border-color: rgba(255,255,255,.16); }
  .section.editorial.sports-ed .ed-rule { background: rgba(255,255,255,.16); }
  .section.editorial.sports-ed .section-head .rule { background: rgba(255,255,255,.35); }
  /* the ring-and-dot mark reads as white on the dark field */
  .section.editorial.sports-ed .section-head .mark { filter: brightness(0) invert(1); }

  /* ---------------- ΤΟΠΙΚΑ ----------------
     One lead with a rule under its headline, then six rows with the
     thumbnail on the right, each divided by a hairline. */
  .section .topika-hero {
    grid-template-columns: 1fr !important;
    gap: 0;
    margin-bottom: 0;
  }
  .topika-photo { grid-column: 1 !important; grid-row: 1 !important; order: 1; }
  .topika-photo img { aspect-ratio: 4 / 3; min-height: 0; }
  .topika-card {
    grid-column: 1 !important; grid-row: 2 !important; order: 2;
    padding: 14px 0 18px;
    border-bottom: 1px solid #ddd8d2;
  }
  .topika-card h3 { font-size: 19px; line-height: 1.3; }

  .grid-lined {
    grid-template-columns: 1fr !important;
    border-top: 0;
    padding-top: 0;
    gap: 0;
  }
  .grid-lined .card:nth-child(n+7) { display: none; }   /* six under the lead */
  .grid-lined .card {
    padding: 16px 0;
    border-right: 0 !important;
    border-bottom: 1px solid #ddd8d2;
  }
  .grid-lined .card > a { display: grid; grid-template-columns: 1fr 118px; gap: 14px; align-items: start; }
  .grid-lined .card .thumb { grid-column: 2; grid-row: 1 / span 3; }
  .grid-lined .card .thumb img { aspect-ratio: 4 / 3; object-fit: cover; }
  .grid-lined .card h3 {
    grid-column: 1; order: 1;
    font-size: 15px; line-height: 1.35; height: auto; -webkit-line-clamp: 3;
  }
  .grid-lined .card .meta { grid-column: 1; order: 2; margin-top: 8px; font-size: 11.5px; }
}

@media (max-width: 780px) {
  /* ---------------- header ----------------
     Burger, logo, search — nothing else. The social icons and the
     classifieds link move into the drawer, where there is room for them. */
  .header-top {
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    align-items: center;
    gap: 8px;
  }
  /* Στο κινητό η κεφαλίδα κρατά μόνο τα απαραίτητα: χάμπουργκερ, λογότυπο,
     αναζήτηση. Η ημερομηνία δεν χωρά δίπλα στο χάμπουργκερ και σε δική της
     γραμμή έτρωγε ύψος από την ύλη, οπότε αποσύρεται. */
  .header-left { display: contents; }
  .hamburger   { grid-column: 1; grid-row: 1; justify-self: start; }
  .header-left .issue-date { display: none; }
  .header-top .logo,
  .header-top > a:has(img) { justify-self: center; }
  .header-top .logo img,
  .header-top > a > img { max-width: 190px; height: auto; }

  .brand { grid-column: 2; grid-row: 1; }
  .header-right { grid-column: 3; grid-row: 1; flex-direction: row; justify-self: end; gap: 0; }
  .header-right .socials { display: none; }
  .header-right .classifieds { display: none; }
  .header-right .row-1 { gap: 0; }
  .icon-search { display: inline-flex; padding: 6px; }
  .icon-search svg { width: 24px; height: 24px; }

  /* το ταμπλό κατηγοριών είναι για μεγάλες οθόνες· εδώ μένει το συρτάρι */
  .mega { display: none; }

  /* the drawer carries what the header dropped */
  /* reads as a button so it stands apart from the navigation links */
  .drawer-classifieds {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 8px 30px 24px;
    padding: 14px 18px;
    background: var(--navy); color: var(--cream);
    border-radius: 8px;
    font-family: var(--ui); font-weight: 700; font-size: 14px;
    letter-spacing: 1px; text-transform: uppercase;
  }
  .drawer-classifieds:hover,
  .drawer-classifieds:active { background: var(--crimson); color: #fff; }

  /* ---------------- hero ----------------
     No slider on a phone: the four stories stack as cards, and the news
     feed follows underneath them. */
  .hero { grid-template-columns: 1fr !important; gap: 0; }
  .hero-main { order: 1; }
  .hero-side { order: 2; position: static; margin-top: 26px; }
  .hero-side-inner { position: static; }

  .slider { height: auto !important; }
  .slider .slide {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin-bottom: 22px;
  }
  .slider .slide img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
  .slider .slide .overlay {
    position: static;
    padding: 12px 0 0;
    background: none;
  }
  .slider .slide h2 { font-size: 18px; line-height: 1.3; color: var(--ink); }
  .slider .slide h2 a { color: inherit; }
  .slider .kicker { color: #5f6673; font-size: 14px; }
  .slider .arrows, .slider-nav { display: none; }

  /* the feed sits under the cards, at its natural length */
  .ticker-list { overflow: visible; max-height: none; }
  .btn-all { margin-top: 16px; }
}

@media (max-width: 780px) {
  /* the drawer takes the whole screen width on a phone */
  .drawer { width: 100%; max-width: 100%; }
  .drawer nav > ul > li > a,
  .drawer .group > button { font-size: 17px; }
}

@media (max-width: 780px) {
  /* iOS Safari zooms the page whenever a focused field is smaller than
     16px. Sizing the controls at 16px stops it at the source — far better
     than user-scalable=no, which takes pinch-zoom away from everyone and
     is ignored by Safari anyway. */
  input, select, textarea, button { font-size: 16px; }
  .search-panel input { font-size: 17px; }
  .nl-form input[type=email] { font-size: 16px; }
  .field input, .field textarea { font-size: 16px; }
  .sort-select { font-size: 16px; }
  .search-box input { font-size: 16px; }

  /* the layout should never need side-to-side panning either */
  html { -webkit-text-size-adjust: 100%; }
}

@media (max-width: 780px) {
  /* ---------------- category pages ----------------
     The photo sits in its own anchor and the headline is its sibling, so
     the grid belongs on the card itself — placing it on the anchor left
     the title spanning the full width. */
  .cat-three {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .cat-three .catcard {
    display: grid;
    grid-template-columns: 1fr 128px;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid #e2ded8;
  }
  .cat-three .catcard > a:first-child { grid-column: 2; grid-row: 1 / span 2; }
  .cat-three .catcard img { aspect-ratio: 4 / 3; margin: 0; }

  .cat-three .catcard h3 {
    grid-column: 1; grid-row: 1;
    font-size: 15px; line-height: 1.35;
    height: auto; -webkit-line-clamp: 4;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cat-three .catcard .meta {
    grid-column: 1; grid-row: 2;
    margin: 8px 0 0; font-size: 11.5px; align-self: start;
  }

  /* Μετά τα δύο μεγάλα, οι κάρτες μπαίνουν δύο ανά σειρά με την εικόνα πάνω. */
  .cat-six,
  .cat-grid,
  .cat-grid.full {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 16px;
  }
  .cat-six .catcard,
  .cat-grid .catcard {
    display: block;
    padding: 0 0 18px;
    border-bottom: 1px solid #e2ded8;
  }
  .cat-six .catcard img,
  .cat-grid .catcard img { aspect-ratio: 16 / 10; margin-bottom: 10px; }
  .cat-six .catcard h3,
  .cat-grid .catcard h3 {
    font-size: 14.5px; line-height: 1.32;
    height: auto; -webkit-line-clamp: 4;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cat-six .catcard .meta,
  .cat-grid .catcard .meta { font-size: 11px; margin-bottom: 6px; }

  /* the lead keeps its full-width photo */
  .cat-lead { gap: 12px; }
  .cat-lead .lead-photo { order: 1; }
  .cat-lead .lead-text { order: 2; }
  .cat-lead h2 { font-size: 20px; line-height: 1.3; }
  .cat-duo .catcard { display: block; border-bottom: 0; }
  .cat-duo .catcard img { aspect-ratio: 16 / 10; }
}

@media (max-width: 780px) {
  /* ---------------- Όλες οι Ειδήσεις ----------------
     A 230px thumbnail beside the text leaves nothing for the headline on a
     phone. The photo goes full width, with the category badge and time
     underneath it, then the headline, divided by a hairline. */
  .news-list .nrow {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #dcd8d2;
  }
  .news-list .nrow:last-child { border-bottom: 0; }
  .news-list .nthumb { display: block; }
  .news-list .nthumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  .news-list .ntop {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 0 10px;
  }
  .news-list .tag { font-size: 11px; padding: 5px 10px; }
  .news-list .ntime { font-size: 12.5px; }
  .news-list h3 {
    font-size: 18px; line-height: 1.32; margin-bottom: 8px;
  }
  .news-list .nexc {
    font-size: 14px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* the archive head sits tighter above the list */
  .archive-head { margin-bottom: 22px; }
  .archive-head h1 { font-size: clamp(20px, 5.5vw, 26px); }
}

@media (max-width: 780px) {
  /* ---------------- Πρωτοσέλιδα / Ένθετα ----------------
     One cover per row, presented as a card: the sheet on its own white
     panel with the date beneath, so each issue reads clearly. */
  .covers-grid {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
  .cover {
    /* the card fills the column; the sheet is centred inside it */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #fff;
    padding: 14px 14px 4px;
    box-shadow: 0 2px 12px rgba(20,25,45,.10);
    border-radius: 4px;
  }
  .cover img {
    border: 0;
    max-height: 62vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }
  .cover:hover img { transform: none; box-shadow: none; }
  .cover figcaption {
    width: 100%;
    justify-content: center;
    padding: 14px 0 12px;
    font-size: 14.5px;
    border-top: 1px solid #eee7dd;
    margin-top: 12px;
  }

  /* the filter row wraps instead of scrolling off the edge */
  .covers-filters { gap: 8px; margin-bottom: 24px; }
  .covers-filters button { padding: 9px 13px; font-size: 11.5px; }
  .covers-date { margin-left: 0; width: 100%; justify-content: center; padding-top: 4px; }

  /* the lightbox gets the full screen with the arrows out of the way */
  .lightbox { padding: 16px; }
  .lightbox img { max-width: 94vw; max-height: 74vh; }
  .lb-nav { position: absolute; bottom: 20px; }
  .lb-prev { left: 26px; }
  .lb-next { right: 26px; }
  .lb-close { top: 14px; right: 16px; }
}

@media (max-width: 780px) {
  /* the two portrait archives read the same on a phone: round photo left,
     headline and date right, hairline between */
  .post { grid-template-columns: 92px 1fr !important; gap: 16px; padding: 16px 0; }
  .post .portrait img { width: 92px; height: 92px; }
  .post-body { border-bottom: 0; padding-bottom: 0; }
  .post h3 { font-size: 15.5px; line-height: 1.35; margin-bottom: 6px; }
  .post .post-date { padding-top: 6px; font-size: 12px; }
  .post-cat { font-size: 10.5px; padding: 4px 9px; margin-bottom: 8px; }
  .post-list { border-top: 0; }
  .post-list .post { border-bottom: 1px solid #dcd8d2; }
}

@media (max-width: 780px) {
  /* A line-clamp only takes effect on a -webkit-box, otherwise the height
     is ignored and the text paints over whatever follows. The paired cards
     declared the clamp without the display, so their headlines spilled. */
  .section.paired .card h3,
  .card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* A cover with width:auto and a max-height resolves its width from the
     height, which let tall sheets push past the column. Size from the
     width instead and let the height follow. */
  .cover img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .covers-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* a <figure> carries a 40px side margin by default, which together with
     width:100% pushed each sheet past the viewport */
  .cover, figure.cover { margin: 0; max-width: 100%; overflow: hidden; }
}

@media (max-width: 780px) {
  /* ---------------- Όλες οι Ειδήσεις ----------------
     A banner opens the page and another closes the seeded rows; the rail
     slots are dropped so advertising stays at those two points only. */
  .archive-main .archive-rail { display: none; }
  #tharros_ads_eidiseis_m_top { margin-bottom: 24px; }
  #tharros_ads_eidiseis_m_mid { margin: 8px 0 24px; }
  .ad.mobile-only { display: block; min-height: 280px; max-width: 336px; margin-inline: auto; }

  /* ---------------- Αναζήτηση ----------------
     Results read like the news list: full-width photo, badge and time
     beneath it, then the headline. */
  .result {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #dcd8d2;
  }
  .result > a { display: block; }
  .result img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .result .rtop { margin: 14px 0 10px; }
  .result .rcat { font-size: 11px; padding: 5px 10px; }
  .result .rtime { font-size: 12.5px; }
  .result h3 { font-size: 18px; line-height: 1.32; }

  /* ---------------- Απόψεις ----------------
     No advertising in this archive on a phone. */
  .section.opinions .ad,
  body:has(.post-list) .archive-rail { display: none; }
}

@media (max-width: 780px) {
  /* ---------------- article page ----------------
     Leaderboards are a desktop shape; on a phone they render at a boxed
     mobile size so they take a fraction of the first screen. */
  .article-main .ad-banner,
  .article-main .ad[data-ad-size="970x250"],
  .wrap > .ad-banner {
    min-height: 0;
    height: 280px;
    max-width: 336px;
    margin: 0 auto 22px;
  }

  .article-title { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.2; }
  .article-standfirst { font-size: 15.5px; line-height: 1.5; margin-bottom: 20px; }
  .crumbs { gap: 8px; margin-bottom: 16px; }
  .crumbs .cat { font-size: 11px; padding: 5px 10px; }
  .crumbs .tag { font-size: 12.5px; }

  .article-hero figcaption { font-size: 12px; padding: 8px 0 0; }
  .article-body { margin-top: 22px; gap: 0; }
  .article-content p { font-size: 16px; line-height: 1.7; }
  .article-content h2 { font-size: 20px; }

  /* the date-and-share strip lies flat above the copy */
  .article-aside {
    display: flex; align-items: center; gap: 16px;
    padding-bottom: 16px; margin-bottom: 18px;
    border-bottom: 1px solid #ddd8d2;
    text-align: left;
  }
  .article-aside .d-day { font-size: 20px; }
  .article-aside .d-rest { margin-top: 0; }
  .article-aside .d-rest br { display: none; }
  .article-aside .shares { flex-direction: row; margin: 0 0 0 auto; gap: 10px; }
  .article-aside .shares a { width: 34px; height: 34px; }

  .tag-row { margin-top: 26px; }
  .also-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 14px; }
  .also-head { margin: 32px 0 18px; }
}

@media (max-width: 780px) {
  /* the archive clipping travels to the phone with the rest of the rail */
  .throwback { max-width: 336px; margin: 22px auto 0; }
}

@media (max-width: 780px) {
  /* the clipping fills the rail column like the front page above it */
  .print-widgets { align-items: stretch; }
  .throwback { width: 100%; max-width: 336px; margin: 22px auto 0; }

  /* Consecutive banners had nothing between them and read as one grey
     slab. Give them air and a clear edge. */
  .ad { margin-block: 20px; }
  .ad + .ad,
  .wrap + .wrap > .ad,
  .rail .ad:first-child { margin-top: 26px; }
  .ad-banner + .ad-banner { margin-top: 30px; }
  /* a full-bleed band between stacked slots keeps them visually separate */
  .wrap > .ad-banner { border: 1px dashed #d7d2ca; }
}

@media (max-width: 780px) {
  /* Στο κινητό η λωρίδα κρατά μόνο το κείμενο και τη φόρμα: το σήμα
     επαναλαμβάνεται λίγο πιο κάτω, στο υποσέλιδο. */
  .newsletter .nl-brand img { display: none; }
  .newsletter .nl-brand p { margin-top: 0; }
}

@media (max-width: 780px) {
  /* Το ζεύγος διαφημίσεων στοιβάζεται στο κινητό. */
  .ad-pair { grid-template-columns: 1fr !important; gap: 18px; margin: 28px 0 8px; }
  .ad-pair .ad { min-height: 280px; max-width: 336px; margin-inline: auto; }
  .ad-incontent { margin: 22px auto; max-width: 336px; min-height: 280px; }
}

@media (max-width: 780px) {
  /* ΠΟΛΙΤΙΣΤΙΚΑ: τα πάντα σε μία στήλη, με το ένθετο στο τέλος. */
  .section.culture .culture-body { grid-template-columns: 1fr !important; gap: 24px; }
  .section.culture .culture-duo,
  .section.culture .culture-grid { grid-template-columns: 1fr 1fr !important; gap: 22px 16px; }
  .section.culture .culture-lead h3 { font-size: 19px; }
  .section.culture .cu-medium h3,
  .section.culture .cu-small h3,
  .section.culture .culture-grid h3 { font-size: 14.5px; line-height: 1.32; }
  .section.culture .excerpt { display: none; }
  .section.culture .culture-rail { position: static; }
  .section.culture .paper.entheto { max-width: 240px; margin: 0 auto; }
}

@media (max-width: 780px) {
  /* Το πεδίο των ΑΘΛΗΤΙΚΩΝ είναι σκούρο, οπότε οι γραμμές και ο σύνδεσμος
     πρέπει να διαβάζονται πάνω του. */
  .section.editorial.sports-ed .section-head .rule,
  .section.editorial.sports-ed .ed-rule { background: rgba(255,255,255,.35); }
  .section.editorial.sports-ed .ed-grid .ed-card { border-bottom-color: rgba(255,255,255,.18); }
  .section.editorial.sports-ed .see-more,
  .section.editorial.sports-ed .see-more-row a { color: #fff; }
  .section.editorial.sports-ed .see-more:hover { color: #9fc3ff; }
}

@media (max-width: 780px) {
  /* Όσο χρειάζεται ο πίνακας των φαρμακείων σε στενή οθόνη — ούτε παραπάνω. */
  .widget-farmakeia iframe { height: 330px; }
}

@media (max-width: 780px) {
  /* Στο κινητό όλα σε μία στήλη: το κύριο άρθρο, μετά οι κάρτες ανά δύο,
     και τα δικαστικά ως σειρές. */
  .section.paired .paired-top { grid-template-columns: 1fr !important; gap: 22px; }
  .section.paired .paired-lead { grid-template-columns: 1fr !important; }
  .section.paired .pl-body { margin-left: 0; padding: 18px 0 0; background: none; }
  .section.paired .pl-body h3 { font-size: 19px; }
  .section.paired .pl-body .excerpt { display: none; }
  .section.paired .paired-rail { position: static; }

  .section.paired .paired-three { grid-template-columns: 1fr 1fr !important; gap: 24px 16px; }
  .section.paired .paired-three h3 { font-size: 14.5px; line-height: 1.32; }

  .section.paired .paired-small { grid-template-columns: 1fr !important; gap: 0; }
  .section.paired .srow { border-bottom: 1px solid #ddd8d2; }
  .section.paired .srow a { grid-template-columns: 110px 1fr !important; padding: 14px 0; }
}

@media (max-width: 780px) {
  /* ΠΟΛΙΤΙΣΤΙΚΑ στο κινητό: το κύριο άρθρο, δύο ισομεγέθεις φωτογραφίες,
     και από κάτω οι κάρτες ανά δύο. */
  .section.culture .culture-duo {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 16px;
    margin-top: 22px; padding-top: 20px;
  }
  .section.culture .cu-medium img,
  .section.culture .cu-small img {
    aspect-ratio: 4 / 3 !important;   /* ίδιο σχήμα και για τις δύο */
    width: 100%;
  }
  .section.culture .cu-medium h3,
  .section.culture .cu-small h3 {
    font-size: 14.5px; line-height: 1.32;
  }
  .section.culture .cu-medium .meta,
  .section.culture .cu-small .meta { font-size: 11px; margin: 10px 0 6px; }

  .section.culture .culture-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 16px;
    margin-top: 22px; padding-top: 20px;
  }
  .section.culture .culture-grid .card { display: block; }
  .section.culture .culture-grid .card > a { display: block; }
  .section.culture .culture-grid .thumb { margin-bottom: 10px; }
  .section.culture .culture-grid img { aspect-ratio: 4 / 3 !important; width: 100%; }
  .section.culture .culture-grid h3 { font-size: 14.5px; line-height: 1.32; }
  .section.culture .culture-grid .meta { font-size: 11px; margin: 0 0 6px; }

  /* μία κάρτα παραπάνω, ώστε η σειρά να κλείνει στο κινητό */
  .section.culture .culture-grid .card.mobile-only { display: block; }
}

@media (max-width: 780px) {
  /* Στα ΑΣΤΥΝΟΜΙΚΑ οι κάρτες μπαίνουν ανά δύο, οπότε μια πέμπτη κλείνει τη
     σειρά αντί να μείνει μισή γραμμή κενή. */
  .section.paired .paired-three .card.mobile-only { display: block; }
}

@media (max-width: 780px) {
  /* Στο κινητό η ίδια ανάσα, λίγο πιο σφιχτή. */
  .section { margin-top: 52px; }
  .section.paired .paired-part { margin-top: 46px; }
}

@media (max-width: 780px) {
  .cat-lead .lead-excerpt {
    font-size: 14px; margin-top: 10px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}

@media (max-width: 780px) {
  /* Στο κινητό οι μπάρες ξεδιπλώνονται κάτω από το κείμενο και η ροή θα
     ερχόταν πολύ αργά για να χρησιμεύσει — τη δίνει η αρχική. */
  .rail-ticker { display: none; }
}

@media (max-width: 780px) {
  /* Επικοινωνία: όλα σε μία στήλη, οι κάρτες σε δύο */
  .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .contact-form .btn-send { width: 100%; }
  .contact-map iframe { height: 600px; }
}

@media (max-width: 780px) {
  /* στο κινητό ισχύει το αντίστροφο */
  .ad-desktop { display: none; }
  .ad-mobile  { display: block; }
}

@media (max-width: 780px) {
  /* Ίδιο σκεπτικό με τον υπολογιστή: ύψος μόνο όταν η θέση είναι άδεια. */
  .ad[data-ad-size="970x250"] { min-height: 0; }
  .ad[data-ad-size="970x250"]:has(.ad-label) { min-height: 280px; }
  .ad.mobile-only { min-height: 0; }
  .ad.mobile-only:has(.ad-label) { min-height: 280px; }
  .ad-pair .ad { min-height: 0; }
  .ad-pair .ad:has(.ad-label) { min-height: 280px; }
  .ad-incontent { min-height: 0; }
  .ad-incontent:has(.ad-label) { min-height: 280px; }

  /* Το banner γεμίζει το πλάτος του κινητού χωρίς να ξεχειλίζει. */
  .ad img { max-width: 100%; height: auto; }
}

@media (max-width: 780px) {
  /* Η ταυτότητα του υποσέλιδου ήταν δύο στήλες: σε τηλέφωνο στρίμωχναν σε
     170 και 140 εικονοστοιχεία και το κείμενο έσπαγε λέξη-λέξη. */
  .footer-identity {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 24px;
    margin-top: 24px;
  }
  .fi-mht { justify-content: flex-start; }
  .fi-mht span { max-width: none; }
  .fi-list { font-size: 13.5px; line-height: 1.7; }
}

@media (max-width: 780px) {
  /* Οι υποκατηγορίες κυλούν οριζόντια αντί να τυλίγονται σε πολλές σειρές. */
  .subcats {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: -10px -20px 24px; padding: 0 20px 4px;
  }
  .subcats::-webkit-scrollbar { display: none; }
  .subcat { flex: none; }
}

@media (max-width: 780px) {
  /* ---- 1. Οι κενές θέσεις δεν κρατούν ύψος ----
     Τα σταθερά ύψη γράφτηκαν όσο οι θέσεις ήταν άδειες. Όταν η Google δεν
     σερβίρει διαφήμιση, το <ins> μένει μηδενικό και το κουτί άφηνε 200-280
     εικονοστοιχεία κενά μέσα στη σελίδα. */
  .rail .ad, .paired-rail .ad, .archive-rail .ad,
  .cat-rail .ad, .article-rail .ad, .culture-rail .ad { height: auto; }
  .rail .ad:has(.ad-label), .paired-rail .ad:has(.ad-label),
  .archive-rail .ad:has(.ad-label), .cat-rail .ad:has(.ad-label),
  .article-rail .ad:has(.ad-label), .culture-rail .ad:has(.ad-label) { height: 200px; }

  .rail .ad[data-ad-size="300x600"], .paired-rail .ad[data-ad-size="300x600"],
  .archive-rail .ad[data-ad-size="300x600"], .cat-rail .ad[data-ad-size="300x600"],
  .article-rail .ad[data-ad-size="300x600"] { height: auto; }
  .rail .ad[data-ad-size="300x600"]:has(.ad-label),
  .cat-rail .ad[data-ad-size="300x600"]:has(.ad-label),
  .article-rail .ad[data-ad-size="300x600"]:has(.ad-label) { height: 200px; }

  .ad-banner { min-height: 0; }
  .ad-banner:has(.ad-label) { min-height: 280px; }
  .ad-incontent, .ad-pair .ad, .ad.mobile-only { min-height: 0; }
  .ad-incontent:has(.ad-label),
  .ad-pair .ad:has(.ad-label),
  .ad.mobile-only:has(.ad-label) { min-height: 280px; }

  /* ---- 2. ΑΠΟΨΕΙΣ: ένα πρόσωπο τη φορά, μεγαλύτερο και στο κέντρο ---- */
  .section.opinions .carousel-track.faces { grid-auto-columns: 100% !important; }
  .section.opinions .face { text-align: center; padding-inline: 8px; }
  .section.opinions .face img { width: 190px; height: 190px; }
  .section.opinions .face h3 { font-size: 18px; line-height: 1.3; margin-top: 6px; }
  .section.opinions .byline { font-size: 14px; }

  /* ---- 3. Το «Δείτε περισσότερα» κλείνει την ενότητα ----
     Έπεφτε πάνω στο banner που ακολουθεί, γιατί δεν είχε δικό του κενό. */
  .see-more-row { margin: 22px 0 6px; clear: both; }
  .section + .wrap > .ad-banner { margin-top: 26px; }
  .section.mostread .see-more-row { margin-bottom: 26px; padding-right: 0; }

  /* ---- 4. Τα βελάκια των βίντεο κόβονταν στο κάτω άκρο ---- */
  .section.videos .carousel { position: relative; padding-bottom: 8px; }
  .section.videos .carousel .nav {
    top: 34%; transform: translateY(-50%); bottom: auto;
  }
}