/*
 * Home hero (resources/views/pages/home/hero.blade.php).
 * Light on purpose: no images, only CSS and one small inline SVG wave.
 * Brand colours: green #306B34, teal #1C5253, white #FFFFFF.
 */

/* ---------- Section ---------- */
/* The header floats over the page (position: absolute), so the top padding
   keeps the text clear of it. The bottom padding leaves room for the search
   box, which moves up into the hero by 40px (see .home-search in site.css). */
.hero-lite {
    position: relative;
    padding: 190px 0 140px;
    /* Solid colour only: the project does not use gradients (.cursor/rules/no-gradients.mdc). */
    background: #FFFFFF; /* pure white (the old pale yellow #F3FFC6 looked bad) */
    overflow: hidden;
}

/* Two columns on desktop, one column on small screens. */
.hero-lite-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ---------- Text side ---------- */
.hero-lite-accent {
    font-family: 'Corinthia', cursive;
    font-size: 44px;
    line-height: 1;
    color: #306B34;
    margin-bottom: 10px;
}

.hero-lite-text h1 {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #1C5253;
    margin-bottom: 20px;
}

/* "Heraklion Airport" stands out in the brand green (solid colour, no gradient). */
.hero-lite-text h1 span {
    color: #306B34;
}

.hero-lite-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #505050;
    max-width: 520px;
    margin-bottom: 25px;
}

/* Benefit "chips": small rounded labels with a check mark. */
.hero-lite-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero-lite-chips li {
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #E1E8E5; /* keeps the white chip visible on the white hero */
    color: #1C5253;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(28, 82, 83, 0.08);
}

.hero-lite-chips li:before {
    content: "\2713"; /* check mark */
    color: #306B34;
    margin-right: 6px;
}

/* ---------- "Arrivals" board ---------- */
/* Dark card with a monospace font, like an airport flight board. */
.hero-board {
    background: #1C5253;
    border-radius: 16px;
    padding: 22px 24px;
    color: #FFFFFF;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    box-shadow: 0 20px 50px rgba(28, 82, 83, 0.25);
    transform: rotate(1.5deg); /* a slight tilt makes it feel less "boxed" */
}

.hero-board-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-board-live i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: #7CDB6A;
    animation: hero-blink 1.6s infinite;
}

.hero-board ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* One row per area. The whole row is a link. */
.hero-board li a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 16px;
    transition: color 200ms ease, padding-left 200ms ease;
}

.hero-board li:last-child a { border-bottom: none; }

/* Hover: the row slides right and the text turns lime (a highlight that shows on the dark board). */
.hero-board li a:hover {
    color: #C3EB78;
    padding-left: 6px;
}

.hero-board-status {
    color: #7CDB6A;
    font-size: 13px;
    white-space: nowrap;
}

@keyframes hero-blink {
    50% { opacity: 0.2; }
}

/* Respect visitors who turn off animations in their system settings. */
@media (prefers-reduced-motion: reduce) {
    .hero-board-live i { animation: none; }
    .hero-board li a { transition: none; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 991px) {
    .hero-lite { padding: 150px 0 110px; }
    .hero-lite-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-lite-text h1 { font-size: 40px; }
    .hero-board { transform: none; } /* no tilt when stacked */
}

@media (max-width: 575px) {
    .hero-lite { padding: 130px 0 100px; }
    .hero-lite-accent { font-size: 36px; }
    .hero-lite-text h1 { font-size: 32px; }
    .hero-lite-text p { font-size: 16px; }
}