/* ==========================================================
   AEGEO.GR – ΕΛΛΗΝΟΤΟΥΡΚΙΚΑ
   4 ειδήσεις σε οριζόντια λωρίδα

   - Η εικόνα είναι αριστερά
   - Ο τίτλος ξεκινά δίπλα της
   - Αν είναι μεγάλος συνεχίζει κάτω από την εικόνα
   - Ο τίτλος ξεκινά οπτικά στο ίδιο ύψος με την εικόνα
   ========================================================== */


/* ==========================================================
   ΤΙΤΛΟΣ SECTION
   ========================================================== */

h2:has(~ .content .aegeo-ellinotourkika-strip) {
  margin: 0 0 14px 0 !important;
  padding: 2px 0 2px 10px !important;

  border-left: 4px solid #c40000 !important;

  color: #111 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;

  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}


/* ==========================================================
   VIEW
   ========================================================== */

.aegeo-ellinotourkika-strip {
  width: 100%;
  box-sizing: border-box;
}


/* ==========================================================
   4 ΕΙΔΗΣΕΙΣ ΣΕ ΜΙΑ ΣΕΙΡΑ
   ========================================================== */

.aegeo-ellinotourkika-strip .view-content {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 0;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   ΚΑΘΕ ΕΙΔΗΣΗ
   ========================================================== */

.aegeo-ellinotourkika-strip
.view-content
> .views-row {
  display: block;

  min-width: 0;

  margin: 0 !important;
  padding: 0 18px !important;

  border-right: 1px solid #e1e1e1;

  box-sizing: border-box;
}


/* Καθαρισμός του float */
.aegeo-ellinotourkika-strip
.view-content
> .views-row::after {
  content: "";
  display: block;
  clear: both;
}


/* Πρώτη είδηση */
.aegeo-ellinotourkika-strip
.view-content
> .views-row:first-child {
  padding-left: 0 !important;
}


/* Τελευταία είδηση */
.aegeo-ellinotourkika-strip
.view-content
> .views-row:last-child {
  padding-right: 0 !important;
  border-right: 0;
}


/* ==========================================================
   ΕΙΚΟΝΑ
   ========================================================== */

.aegeo-ellinotourkika-strip
.views-field-field-image {
  float: left;

  width: 110px;

  margin:
    0
    11px
    6px
    0 !important;

  padding: 0 !important;
}


.aegeo-ellinotourkika-strip
.views-field-field-image
.field-content,

.aegeo-ellinotourkika-strip
.views-field-field-image a {
  display: block;
}


.aegeo-ellinotourkika-strip
.views-field-field-image img {
  display: block;

  width: 110px !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 7px;
}


/* ==========================================================
   ΤΙΤΛΟΣ
   ========================================================== */

/*
   Δεν βάζουμε grid στον τίτλο.
   Έτσι το κείμενο ρέει γύρω από το float της εικόνας.
*/

.aegeo-ellinotourkika-strip
.views-field-title {
  display: block;

  margin: 0 !important;
  padding: 0 !important;

  min-width: 0;
}


/* Drupal wrapper */
.aegeo-ellinotourkika-strip
.views-field-title
.field-content {
  display: inline;

  margin: 0 !important;
  padding: 0 !important;
}


/*
   Αυτό είναι το πραγματικό Drupal element που είδαμε
   στο Inspect.

   Το -7px ανεβάζει οπτικά τα γράμματα ώστε να ξεκινούν
   στο ίδιο ύψος με το πάνω μέρος της εικόνας.
*/

.aegeo-ellinotourkika-strip
.views-field-title
.field--name-title {
  display: inline;

  position: relative;
  top: -12px;  /* τίτλος */

  margin: 0 !important;
  padding: 0 !important;
}


/* Link τίτλου */

.aegeo-ellinotourkika-strip
.views-field-title
.field--name-title a {
  color: #222;

  font-size: 0.91rem;
  font-weight: 700;
  line-height: 1.28;

  margin: 0 !important;
  padding: 0 !important;

  text-decoration: none;
}


.aegeo-ellinotourkika-strip
.views-field-title
.field--name-title a:hover {
  color: #b30000;
}


/* ==========================================================
   TABLET – 2 × 2
   ========================================================== */

@media (max-width: 991px) {

  .aegeo-ellinotourkika-strip .view-content {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0 22px;
  }


  .aegeo-ellinotourkika-strip
  .view-content
  > .views-row {
    padding: 14px 0 !important;

    border-right: 0;
    border-bottom: 1px solid #e1e1e1;
  }


  .aegeo-ellinotourkika-strip
  .view-content
  > .views-row:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}


/* ==========================================================
   MOBILE – 1 ΕΙΔΗΣΗ ΑΝΑ ΣΕΙΡΑ
   ========================================================== */

@media (max-width: 600px) {

  .aegeo-ellinotourkika-strip .view-content {
    grid-template-columns: 1fr;
    gap: 0;
  }


  .aegeo-ellinotourkika-strip
  .view-content
  > .views-row {
    padding: 12px 0 !important;

    border-right: 0;
    border-bottom: 1px solid #e1e1e1;
  }


  .aegeo-ellinotourkika-strip
  .views-field-field-image {
    width: 90px;

    margin:
      0
      10px
      5px
      0 !important;
  }


  .aegeo-ellinotourkika-strip
  .views-field-field-image img {
    width: 90px !important;
    max-width: 100% !important;
    height: auto !important;
  }


  .aegeo-ellinotourkika-strip
  .views-field-title
  .field--name-title a {
    font-size: 0.88rem;
    line-height: 1.3;
  }


  .aegeo-ellinotourkika-strip
  .view-content
  > .views-row:nth-last-child(-n+2) {
    border-bottom: 1px solid #e1e1e1;
  }


  .aegeo-ellinotourkika-strip
  .view-content
  > .views-row:last-child {
    border-bottom: 0;
  }
}