@charset "UTF-8";
/* climate-observer.css — v1.4.1 (2025-10-15)
   Hard override των font sizes: px + υψηλή ειδικότητα + !important
   Στόχος: συνεπή μεγέθη σε desktop & iPhone, ανεξάρτητα από global CSS.
*/

/* ===== Tokens / Frame ===== */
.climobs {
  --co-text: #2b2b2b;
  --co-muted: #6b6b6b;
  --co-accent: #080808;
  --co-green: #c7e2cd;
  --co-blue:  #c7d5e2;
  --co-orange:#fdc689;
  --co-radius: 14px;
  --co-shadow: 0 6px 20px rgba(0,0,0,0.12);
  --co-gap: 22px;
  --co-hover-border-w: 3px;
  --co-hover-border-c: #000;

  font-family: inherit !important;
  color: var(--co-text);
  max-width: 1200px;
  margin: 0 auto;
  -webkit-text-size-adjust: 100% !important; /* iOS: μην πειράζεις τα fonts */
}
.climobs * { box-sizing: border-box; }

/* ===== Header ===== */
.climobs .climobs__header { margin-bottom: 18px; }

.climobs .climobs__title {
  margin: 0 0 8px 0;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.15;
  position: relative;
  /* Desktop explicit */
  font-size: 27px !important;
}
.climobs .climobs__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--co-accent);
  margin-top: 8px;
}

.climobs .climobs__intro {
  margin: 12px 0 0 0;
  max-width: 72ch;
  line-height: 1.65 !important;
  color: var(--co-muted);
  font-size: 16.5px !important;
}

/* ===== Grid ===== */
.climobs .climobs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--co-gap);
  margin-top: 18px;
}
@media (min-width: 700px) {
  .climobs .climobs__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Card ===== */
.climobs .climobs-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  padding: 0;
  text-align: left;
}
.climobs .climobs-card--green  { background: var(--co-green); }
.climobs .climobs-card--blue   { background: var(--co-blue); }
.climobs .climobs-card--orange { background: var(--co-orange); }

/* Full-card link */
.climobs .climobs-card__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: var(--co-radius);
  padding: 22px 18px 24px;
}

/* Hover: εσωτερικό περίγραμμα */
.climobs .climobs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--co-hover-border-w) solid var(--co-hover-border-c);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.climobs .climobs-card:hover::after,
.climobs .climobs-card:focus-within::after { opacity: 1; }

/* Icon */
.climobs .climobs-card__icon {
  display: block;
  width: 92px;
  height: auto;
  margin: 6px auto 12px;
  object-fit: contain;
}

/* Card title & text — EXPLICIT PX + !important */
.climobs .climobs-card__title {
  margin: 6px 0 10px 0;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.3 !important;
  text-align: center;
  padding:8px;
  font-size: 14px !important;   /* Desktop */
}
.climobs .climobs-card__text {
  margin: 0 auto;
  max-width: 48ch;
  line-height: 1.7 !important;
  color: var(--co-muted);
  text-align: left;
  font-size: 12px !important;     /* Desktop */
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom:8px;
}

/* A11y */
.climobs .climobs-card__link:focus-visible { outline: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .climobs .climobs-card::after { transition: none; }
}

/* ===== Mobile / iPhone (portrait έως ~480px) ===== */
@media (max-width: 480px) {
  .climobs { -webkit-text-size-adjust: 100% !important; }

  .climobs .climobs__title { font-size: 30px !important; }
  .climobs .climobs__intro { font-size: 18px !important; line-height: 1.75 !important; }

  .climobs .climobs-card__title { font-size: 20px !important; line-height: 1.35 !important; }
  .climobs .climobs-card__text  { font-size: 17.5px !important; line-height: 1.78 !important; }

  .climobs .climobs-card__icon  { width: 88px !important; }
  .climobs .climobs-card__link  { padding: 20px 16px !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  .climobs .climobs__title { font-size: 28px !important; }
  .climobs .climobs__intro { font-size: 17px !important; }
  .climobs .climobs-card__title { font-size: 19px !important; }
  .climobs .climobs-card__text  { font-size: 16.8px !important; }
}
/* Mobile: μεγαλύτερα εικονίδια (responsive χωρίς να πειράζουμε fonts) */
@media (max-width: 480px) {
  .climobs .climobs-card__icon {
    width: clamp(112px, 30vw, 160px);  /* μεγαλώνει στο iPhone, με όριο */
  }
 
/* Reset για να μη μας «πατάνε» global img κανόνες */
.climobs .climobs-card__icon {
  display: block !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;     /* ακυρώνει img { max-width:100% } */
  margin: 6px auto 12px !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Mobile: δώσε ΣΥΓΚΕΚΡΙΜΕΝΟ πλάτος στα icons */
@media (max-width: 480px) {
  .climobs .climobs-card__icon {
    width: clamp(220px, 64vw, 360px) !important;  /* μεγαλώνει αισθητά στο iPhone */
    height: auto !important;
  }
}

/* Πολύ μικρές οθόνες (προσαρμογή) */
@media (max-width: 380px) {
  .climobs .climobs-card__icon {
    width: clamp(112px, 34vw, 172px) !important;
  }
}

/* iOS hint (προαιρετικό) */
@supports (-webkit-touch-callout: none) {
  .climobs .climobs-card__icon { image-rendering: -webkit-optimize-contrast; }
}
    /* === Icons: catch-all selectors + debug === */
.climobs img.climobs-card__icon,
.climobs .climobs-card img.climobs-card__icon,
.climobs .climobs-card a img.climobs-card__icon,
.climobs .climobs-card img[src*="climateMap-"],
.climobs img[src*="climateMap-"] {
  display: block !important;
  height: auto !important;
  /* μεγαλώνουμε ξεκάθαρα */
  width: 120px !important;
  margin: 6px auto 12px !important;
  object-fit: contain !important;



/* Mobile: ακόμη πιο μεγάλα */
@media (max-width: 480px) {
  .climobs img.climobs-card__icon,
  .climobs .climobs-card img.climobs-card__icon,
  .climobs .climobs-card a img.climobs-card__icon,
  .climobs .climobs-card img[src*="climateMap-"],
  .climobs img[src*="climateMap-"] {
    width: 160px !important;   /* αύξησέ το αν θες */
  }
}