/* STIC-AmSud page overrides on top of HTML5 UP "Solid State" (assets/css/main.css).
   Kept separate so the template CSS stays stock. */

/* The page uses a .col-15 grid class that the template does not define:
   rows of three logos between two .col-2 spacers. 20% each keeps them centred. */
.row > .col-15 { width: 20%; }
@media screen and (max-width: 736px) { .row > .col-15 { width: 100%; } }

/* Spotlight images are partner/centre logos, not portraits: no circular crop. */
.wrapper.spotlight .image, .wrapper.spotlight .image img { border-radius: 0; }
.wrapper.spotlight .image { overflow: visible; }

/* Embedded video must not widen the page on phones. */
iframe { max-width: 100%; }

/* The off-canvas menu and the skewed section edges must not add a horizontal scrollbar. */
html, body { overflow-x: hidden; }

/* "Project news": blog posts tagged sticamsud in the CIMTT portal, written by it
   between the blog:sticamsud markers in index.html. */
.news-grid { display: grid; gap: 1.5em; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 1.5em; }
.news-card, .news-card:hover { display: flex; flex-direction: column; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; overflow: hidden; color: inherit; }
.news-card:hover { background: rgba(255,255,255,.12); }
.news-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-body { display: flex; flex-direction: column; gap: .4em; padding: 1em 1.1em 1.2em; }
.news-body time { font-size: .72em; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.news-body strong { color: #fff; line-height: 1.3; }
.news-body p { margin: 0; font-size: .9em; line-height: 1.55; }
.news-author { font-size: .8em; opacity: .8; }


/* images/bg.jpg is the centre photo (nuestro-centro-9.jpg), the fixed back layer every section
   scrolls over. It is brighter than the template's stock image, so the navy tint is a bit deeper. */
body { background-image: linear-gradient(to top, rgba(40, 43, 62, .88), rgba(40, 43, 62, .88)), url("../../images/bg.jpg"); }
@media screen and (max-width: 1280px) {
  #banner { background-image: linear-gradient(to top, rgba(40, 43, 62, .88), rgba(40, 43, 62, .88)), url("../../images/bg.jpg"); }
}
#banner p { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }