/** 
Module IOS Grid (Modern Override)
- Cleaner layout (CSS Grid)
- Softer shadows, rounded corners
- Better responsiveness
*/

/* ===== Tokens (ajusta aqui ao estilo do destinonamibe.com) ===== */
:root{
  --igrid-radius: 14px;
  --igrid-gap: 18px;
  --igrid-shadow: 0 10px 24px rgba(0,0,0,.10);
  --igrid-shadow-hover: 0 14px 34px rgba(0,0,0,.16);
  --igrid-text: #2b2b2b;
  --igrid-muted: #666;
  --igrid-surface: #fff;
  --igrid-overlay: rgba(0,0,0,.42);
  --igrid-overlay-hover: rgba(0,0,0,.62);
}

/* ===== Container ===== */
.igrid_wrap{
  margin: 0 0 30px;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  gap: var(--igrid-gap);
}

/* ===== Box base (mantém classes do módulo) ===== */
.igrid_box1, .igrid_box2, .igrid_box3, .igrid_box4{
  display: block;
  width: 100%;
  margin: 0;              /* remove espaçamentos antigos */
  padding: 0;
  float: none;            /* desliga floats */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--igrid-radius);
  box-shadow: var(--igrid-shadow);
  background: var(--igrid-surface);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.igrid_box1:hover, .igrid_box2:hover, .igrid_box3:hover, .igrid_box4:hover{
  transform: translateY(-2px);
  box-shadow: var(--igrid-shadow-hover);
}

/* ===== Layout por colunas (sem nth-child) ===== */
/* Por defeito: 3 colunas (boa para listagens) */
.igrid_wrap{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Quando tiveres grelhas específicas, podes aplicar na wrapper:
   <div class="igrid_wrap igrid_cols4"> ... */
.igrid_wrap.igrid_cols1{ grid-template-columns: 1fr; }
.igrid_wrap.igrid_cols2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.igrid_wrap.igrid_cols3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.igrid_wrap.igrid_cols4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Se não consegues alterar HTML, mantém compatibilidade:
   - box1 ocupa 3 colunas (destaque)
   - box2 ocupa 2 colunas
   - box3 ocupa 1 coluna
   - box4 ocupa 1 coluna */
.igrid_box1{ grid-column: 1 / -1; }
.igrid_box2{ grid-column: span 2; }
.igrid_box3, .igrid_box4{ grid-column: span 1; }

/* ===== Conteúdo ===== */
.igrid_inbox{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.igrid_inbox a,
.igrid_inbox a:visited{
  display: block;
  text-decoration: none;
  border: none;
  color: var(--igrid-text);
  outline: none;
}

/* Imagem: corte consistente */
.igrid_inbox img{
  width: 100%;
  height: 350px;          /* altura default (ajusta se quiseres) */
  object-fit: cover;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
  transform: scale(1);
  transition: transform .35s ease;
}

.igrid_inbox a:hover img{ transform: scale(1.06); }

/* Alturas antigas (se ainda precisares) */
.igrid_img140 img{ height:140px; }
.igrid_img160 img{ height:160px; }
.igrid_img180 img{ height:180px; }
.igrid_img200 img{ height:200px; }
.igrid_img220 img{ height:220px; }
.igrid_img240 img{ height:240px; }
.igrid_img260 img{ height:260px; }
.igrid_img280 img{ height:280px; }
.igrid_img320 img{ height:320px; }
.igrid_img360 img{ height:360px; }
.igrid_img400 img{ height:400px; }

/* ===== Overlay moderno ===== */
.igrid_above{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: none;
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(to top, var(--igrid-overlay), rgba(0,0,0,0));
  overflow: hidden;
  transition: background .2s ease;
}

.igrid_inbox a:hover .igrid_above{
  background: linear-gradient(to top, var(--igrid-overlay-hover), rgba(0,0,0,0));
}

/* ===== Bloco abaixo (quando usado) ===== */
.igrid_below{
  margin: 0;
  padding: 12px 14px 14px;
  background: var(--igrid-surface);
  border: none;
  box-sizing: border-box;
  color: var(--igrid-text);
}

/* ===== Tipografia ===== */
.igrid_linebig h4, .igrid_linefull h4,
a.igrid_hlink, a.igrid_hlink:visited{
  font: 700 16px/1.25 "Open Sans","Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  margin: 0;
  padding: 0;
  color: var(--igrid-text);
}

.igrid_note{
  margin: 6px 0 0;
  padding: 0;
  font: 400 12.5px/1.35 "Open Sans","Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color: var(--igrid-muted);
}

.igrid_above .igrid_note,
.igrid_above .igrid_linebig h4,
.igrid_above .igrid_linefull h4{
  color: #fff;
}

/* ===== Links ===== */
a.igrid_hlink:hover{ color: #111; opacity: .86; }

a.igrid_morelink,
a.igrid_morelink:visited{
  display: block;
  margin: 0;
  padding: 10px 0 0;
  text-decoration: none;
  font: 600 14px/1.2 "Open Sans","Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color: #2866D7;
}

/* ===== Ribbon mais clean ===== */
.igrid_ribbon{
  position: absolute;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
  font: 700 12px/1 "Open Sans","Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color: #fff;
  background: #111;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transform: none; /* remove rotate */
}

/* cores antigas podem manter */
.igrid_ribbon1{ background:#39d; }
.igrid_ribbon2{ background:#e43; }
.igrid_ribbon3{ background:#389F47; }
.igrid_ribbon4{ background:#e82; }
.igrid_ribbon5{ background:#95b; }
.igrid_ribbon6, .igrid_ribbon7, .igrid_ribbon8, .igrid_ribbon9, .igrid_ribbon10,
.igrid_ribbon11, .igrid_ribbon12, .igrid_ribbon13, .igrid_ribbon14, .igrid_ribbon15,
.igrid_ribbon16{ background:#CC0000; }
.igrid_ribbon17{ background:#38761D; }

/* ===== Micro-ajustes dos “lines” ===== */
.igrid_line1, .igrid_line2{ margin:0; padding:0; }
.igrid_linebig{ width:auto; float:none; }
.igrid_linesmall{ width:auto; float:none; margin:0; text-align:left; }
.igrid_line1:after, .igrid_line2:after{ content:none; }

/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .igrid_wrap{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .igrid_box2{ grid-column: span 1; } /* evita cards gigantes em tablet */
}

@media (max-width: 640px){
  .igrid_wrap{ grid-template-columns: 1fr; }
  .igrid_box1, .igrid_box2, .igrid_box3, .igrid_box4{ grid-column: 1 / -1; }
  .igrid_inbox img{ height: 220px; }
}

@media (prefers-reduced-motion: reduce){
  .igrid_box1, .igrid_box2, .igrid_box3, .igrid_box4,
  .igrid_inbox img{ transition: none !important; }
}