/*
 * index.css — Homepage (Portal Hub)
 * Language toggle, aircraft tags, tools grid, tool cards
 * Author: Oren Gal — 2026 · cgr-dad.com
 */

/* ——— Install Button ——— */
.install-btn {
  font: 700 13px var(--sans);
  cursor: pointer;
  color: var(--green);
  background: transparent;
  border: 1.5px solid var(--line2);
  border-radius: 9px;
  padding: 7px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  letter-spacing: .01em;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.install-btn:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(31, 77, 60, .22);
}

.install-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(31, 77, 60, .18);
}

.install-btn[hidden] { display: none; }

/* ——— Aircraft Tags ——— */
.aircraft-tags {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
  animation: revealUp 0.7s var(--ease) 0.18s both;
}

.ac-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  letter-spacing: .015em;
  line-height: 1.3;
  border: 1px solid transparent;
}

.ac-tag.cgr {
  background: #d1fae5;
  color: #065f46;
  border-color: rgba(6, 95, 70, .1);
}

.ac-tag.dad {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: rgba(29, 78, 216, .1);
}

.tach-info {
  font-size: 11px;
  font-weight: 700;
  margin-inline-start: 5px;
  opacity: .68;
  font-variant-numeric: tabular-nums;
}

/* ——— Tools Grid ——— */
.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

.tool-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: var(--shadow-rest);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  animation: revealUp 0.7s var(--ease) both;
}

.tool-card:nth-child(1) { animation-delay: 0.24s }
.tool-card:nth-child(2) { animation-delay: 0.31s }
.tool-card:nth-child(3) { animation-delay: 0.38s }
.tool-card:nth-child(4) { animation-delay: 0.45s }

.tool-card:hover,
.tool-card:focus-visible {
  border-color: rgba(31, 77, 60, .35);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.tool-card:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-raised);
}

.tool-card.disabled {
  pointer-events: none;
  cursor: default;
  position: relative;
}

.tool-card.disabled .tool-icon,
.tool-card.disabled h2,
.tool-card.disabled p {
  opacity: 0.35;
}

.soon-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
  background: #ede9fe;
  border: 1px solid rgba(124, 58, 237, .15);
  border-radius: 6px;
  padding: 3px 10px;
  letter-spacing: .02em;
}

[dir="rtl"] .soon-badge { right: auto; left: 14px; }

/* ——— Tool Icons ——— */
.tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(0, 0, 0, .04);
  transition: transform var(--dur) var(--ease);
}

.tool-card:hover .tool-icon { transform: scale(1.06) }
.tool-icon svg { width: 26px; height: 26px; display: block }

.tool-icon.mb { background: var(--green-soft) }
.tool-icon.fl { background: #dbeafe }
.tool-icon.cal { background: #fef3c7 }
.tool-icon.cl { background: #ede9fe }


/* ——— Card Text ——— */
.tool-card h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.tool-card p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.55;
  flex: 1;
}

.tool-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: .01em;
  transition: gap var(--dur) var(--ease);
}

.tool-arrow svg { transition: transform var(--dur) var(--ease) }
.tool-card:hover .tool-arrow { gap: 10px }
.tool-card:hover .tool-arrow svg { transform: translateX(2px) }

/* ——— Index Responsive ——— */
@media (max-width: 500px) {
  .tools-grid { grid-template-columns: 1fr }
  .lede { font-size: 15.5px }
  .tool-card { padding: 22px 18px }
  .aircraft-tags { gap: 6px; margin-top: 14px }
  .ac-tag { font-size: 11px; padding: 4px 9px }
}

@media (max-width: 360px) {
  .tool-card h2 { font-size: 18px }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card:hover, .tool-card:focus-visible { transform: none }
  .tool-card:hover .tool-icon { transform: none }
}