/* ==============================
   ILHÉUS TECH NEWS - STYLE.CSS
   ============================== */

:root {
  --bg: #081226;
  --card: #0e2136;
  --muted: #9fb2c8;
  --accent: #00d1ff;
  --accent-2: #7c5cff;
  --glass: rgba(255, 255, 255, 0.04);
  --radius: 14px;
  --max-width: 1200px;
  --gap: 18px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--bg), #041426 140%);
  color: #e6f3fb;
}

a {
  color: var(--accent);
  text-decoration: none;
}

.wrap {
  max-width: var(--max-width);
  margin: 28px auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 320px;
  /* ==============================
     ILHÉUS TECH NEWS - STYLE.CSS
     Cleaned and duplicated blocks removed
     ============================== */

  :root {
    --bg: #081226;
    --card: #0e2136;
    --muted: #9fb2c8;
    --accent: #00d1ff;
    --accent-2: #7c5cff;
    --glass: rgba(255, 255, 255, 0.04);
    --radius: 14px;
    --max-width: 1200px;
    --gap: 18px;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }

  html, body {
    height: 100%;
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    background: linear-gradient(180deg, var(--bg), #041426 140%);
    color: #e6f3fb;
  }

  a { color: var(--accent); text-decoration: none; }

  .wrap {
    max-width: var(--max-width);
    margin: 28px auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--gap);
  }

  /* HEADER */
  header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    position: sticky;
    top: 0;
    backdrop-filter: blur(12px);
    background: rgba(8, 18, 38, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1000;
    padding: 10px 16px;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 4px 25px rgba(0, 200, 255, 0.08);
  }

  .brand { display: flex; align-items: center; gap: 20px; }

  .main-logo {
    height: 140px;
    width: auto;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 200, 255, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .main-logo:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(0,255,255,0.8); }

  .brand h1 {
    margin: 0;
    font-size: 1.6rem;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }

  .tagline { font-size: 0.9rem; color: var(--muted); }

  .controls { display: flex; align-items: center; gap: 10px; }

  .search { position: relative; }
  .search input {
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.04);
    padding: 10px 38px 10px 12px;
    border-radius: 12px; color: inherit; width: 320px;
  }
  .search button { position: absolute; right: 6px; top: 6px; border: 0; background: transparent; color: var(--muted); padding: 6px; }

  .toggle { background: transparent; border: 1px solid rgba(255,255,255,0.06); padding: 8px 10px; border-radius: 10px; cursor: pointer; }

  /* categories */
  .category-bar { grid-column: 1 / -1; display: flex; overflow-x: auto; gap: 10px; padding: 8px 0 16px 0; scroll-behavior: smooth; }
  .category-bar::-webkit-scrollbar { height: 6px; }
  .category-bar::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 10px; }
  .category-item { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: 0.2s; font-size: 0.88rem; color: #e6f3fb; }
  .category-item:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; transform: scale(1.05); }

  /* hero */
  .hero { display: grid; grid-template-columns: 1fr 360px; gap: 18px; margin-bottom: 18px; }
  .hero-card { background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent); padding: 18px; border-radius: var(--radius); display:flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 30px rgba(2,8,20,0.6); }
  .hero-card img { width:100%; height:320px; object-fit:cover; border-radius:10px; }
  .meta { display:flex; justify-content:space-between; align-items:center; }
  .meta .cat { padding:6px 8px; border-radius:8px; background: rgba(255,255,255,0.04); font-weight:600; font-size:0.8rem; }

  /* articles grid */
  .grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--gap); }
  .card { background: var(--card); padding:12px; border-radius:12px; display:flex; gap:12px; align-items:flex-start; border:1px solid rgba(255,255,255,0.03); transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,200,255,0.08); }
  .card img { width:160px; height:100px; object-fit:cover; border-radius:8px; }
  .card h3 { margin:0; font-size:1rem; }
  .card p { margin:6px 0 0; color: var(--muted); font-size:0.9rem; }

  aside { position: relative; }
  .side-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:12px; border-radius:12px; margin-bottom:12px; border:1px solid rgba(255,255,255,0.03); }
  .ticker { overflow:hidden; border-radius:8px; padding:8px; background: rgba(255,255,255,0.02); }
  .ticker p { white-space:nowrap; margin:0; display:inline-block; padding-right:30px; }
  .categories { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { padding:8px 10px; border-radius:999px; background: rgba(255,255,255,0.03); cursor:pointer; border:1px solid rgba(255,255,255,0.02); }

  footer { grid-column: 1 / -1; margin-top: 20px; padding: 18px; border-radius:12px; color: var(--muted); display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,0.05); }

  @media (max-width: 980px) {
    .wrap { grid-template-columns: 1fr; }
    .hero { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; }
    .search input { width: 160px; }
    header { flex-direction: column; align-items: flex-start; }
  }

  .meta-small { font-size: 0.82rem; color: var(--muted); }
  .read-more { margin-left: auto; font-size: 0.85rem; color: var(--accent); cursor: pointer; }

  /* modal */
  #subscribeModal { position: fixed; top:0; left:0; width:100vw; height:100vh; background: rgba(5,10,20,0.85); backdrop-filter: blur(10px) saturate(180%); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; pointer-events:none; transition: opacity 0.35s ease-in-out; }
  #subscribeModal.active { opacity:1; pointer-events: all; }
  .modal-content { position:relative; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:20px; padding:2rem 2.2rem; width:90%; max-width:420px; color:#fff; text-align:center; box-shadow: 0 0 40px rgba(0,200,255,0.25); animation: slideUp 0.4s ease; }
  @keyframes slideUp { from { transform: translateY(40px); opacity:0; } to { transform: translateY(0); opacity:1; } }
  .modal-content h2 { font-size:1.6rem; font-weight:700; background: linear-gradient(90deg,#00d1ff,#7c5cff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:0.8rem; }
  .modal-content p { font-size:0.95rem; color:#c9d5e3; margin-bottom:1.5rem; }
  .modal-content input { width:100%; padding:0.9rem 1rem; margin-bottom:0.9rem; border-radius:12px; border:1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color:#fff; font-size:1rem; outline:none; transition:0.25s ease; }
  .modal-content input:focus { border-color:#00d1ff; box-shadow: 0 0 12px rgba(0,209,255,0.3); }
  .modal-content input::placeholder { color:#b5c5d8; }
  .modal-content button[type="submit"] { width:100%; padding:0.9rem; border:none; border-radius:12px; background: linear-gradient(90deg,#00d1ff,#7c5cff); color:#fff; font-weight:600; font-size:1rem; cursor:pointer; transition:0.25s ease; box-shadow: 0 0 15px rgba(124,92,255,0.4); }
  .modal-content button[type="submit"]:hover { transform: translateY(-2px); box-shadow:0 0 25px rgba(0,209,255,0.6); }
  .close-modal { position:absolute; top:14px; right:18px; background:none; border:none; font-size:1.3rem; color:#fff; opacity:0.8; cursor:pointer; transition:0.2s; }
  .close-modal:hover { opacity:1; transform: rotate(90deg); }

  /* Estilos para visualização de artigo única */
  .article-full {
    display: block;
    padding: 18px;
  }

  .article-full .hero-card {
    padding: 20px;
    border-radius: 12px;
  }

  .article-full img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .article-content {
    margin-top: 12px;
    color: #dbeaf6;
  }

  .article-content p {
    line-height: 1.65;
    font-size: 1rem;
    margin: 0 0 1rem;
    color: var(--muted);
  }

  @media (max-width: 720px) {
    .article-full .hero-card { padding: 12px; }
    .article-content p { font-size: 0.98rem; }
  }