/* gr-home.css — Homepage-specific styles */
/*
 * Stili caricati SOLO sulla homepage (page-home.php):
 * hero slider, trust bar, CTA bars, brand carousel/grid,
 * tabs veicoli (ultimi arrivi / premium), why-us, yacht section,
 * service box, reviews/carousel, blog cards, newsletter,
 * intro, section title/header, premium scroll, link arrow.
 *
 * Richiede: gr-tokens.css, gr-base.css
 *
 * @package GR_AYM
 */


/* ==========================================================================
   HERO SLIDER (.gr-hero)
   ========================================================================== */

.gr-hero {
    position: relative;
    height: 70vh;
    min-height: 400px;
    max-height: 700px;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .gr-hero {
        height: 80vh;
        max-height: 800px;
    }
}

.gr-hero__slider {
    position: absolute;
    inset: 0;
}

.gr-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.gr-hero__slide--active {
    opacity: 1;
}

.gr-hero__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.gr-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gr-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 58, 92, 0.3) 0%,
        rgba(26, 58, 92, 0.6) 50%,
        rgba(26, 58, 92, 0.8) 100%
    );
    z-index: 1;
}

.gr-hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var(--gr-space-4);
    color: var(--gr-white);
}

.gr-hero__content h1 {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-3xl);
    font-style: italic;
    color: var(--gr-white);
    margin-bottom: var(--gr-space-2);
}

@media (min-width: 1024px) {
    .gr-hero__content h1 {
        font-size: var(--gr-text-4xl);
    }
}

.gr-hero__content p {
    font-size: var(--gr-text-lg);
    opacity: 0.9;
    max-width: 600px;
    margin-bottom: var(--gr-space-6);
}

.gr-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gr-space-3);
    justify-content: center;
}

.gr-hero__dots {
    position: absolute;
    bottom: var(--gr-space-2);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0; /* i bottoni sono gia 44px, nessun gap necessario */
}

.gr-hero__dot {
    /* Touch target: bottone 44x44 reale, pallino visibile e ::after */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gr-hero__dot::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--gr-white);
    background: transparent;
    transition: background-color var(--gr-transition),
                border-color var(--gr-transition);
}

.gr-hero__dot--active::after {
    background-color: var(--gr-gold);
    border-color: var(--gr-gold);
}

/* --- Hero subtitle ------------------------------------------------------- */

.gr-hero__subtitle {
    font-size: var(--gr-text-lg);
    opacity: 0.9;
    margin-bottom: var(--gr-space-6);
    max-width: 600px;
}
@media (min-width: 1024px) {
    .gr-hero__subtitle { font-size: var(--gr-text-xl); }
}

/* --- Hero Search Bar ----------------------------------------------------- */

.gr-hero__search {
    width: 100%;
    max-width: 900px;
    margin-bottom: var(--gr-space-6);
}

.gr-hero__search-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--gr-radius);
    padding: 0.75rem;
}
@media (min-width: 768px) {
    .gr-hero__search-fields {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        padding: 0.5rem;
        background: var(--gr-white);
        backdrop-filter: none;
    }
}

.gr-hero__search-field {
    flex: 1 1 100%;
}
/* Su mobile: marca full-width, i due campi prezzo affiancati */
.gr-hero__search-field--price {
    flex: 1 1 calc(50% - 0.25rem);
}
@media (min-width: 768px) {
    .gr-hero__search-field,
    .gr-hero__search-field--price {
        flex: 1 1 0%;
    }
}

.gr-hero__search-field select,
.gr-hero__search-field input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gr-border);
    border-radius: var(--gr-radius-sm);
    font-size: var(--gr-text-base);
    font-family: var(--gr-font-body);
    min-height: 48px;
    background: var(--gr-white);
    color: var(--gr-dark);
    appearance: none;
}
@media (min-width: 768px) {
    .gr-hero__search-field select,
    .gr-hero__search-field input {
        border: none;
        border-right: 1px solid var(--gr-border);
        border-radius: 0;
        padding: 0.875rem 1.25rem;
    }
    .gr-hero__search-field:last-of-type select,
    .gr-hero__search-field:last-of-type input {
        border-right: none;
    }
}
.gr-hero__search-field select:focus,
.gr-hero__search-field input:focus {
    outline: 3px solid var(--gr-gold);
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}

.gr-hero__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .gr-hero__search-btn {
        border-radius: var(--gr-radius-sm);
        margin: 0;
    }
}


/* ==========================================================================
   TRUST BAR (.gr-trust-bar)
   ========================================================================== */

.gr-trust-bar {
    background-color: var(--gr-navy);
    color: var(--gr-white);
    padding: var(--gr-space-6) 0;
}

.gr-trust-bar__inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gr-space-8);
}

@media (min-width: 1024px) {
    .gr-trust-bar__inner {
        gap: var(--gr-space-16);
    }
}

.gr-trust-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gr-trust-bar__item strong {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-2xl);
    color: var(--gr-gold);
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .gr-trust-bar__item strong {
        font-size: var(--gr-text-3xl);
    }
}

.gr-trust-bar__item span {
    font-size: var(--gr-text-sm);
    opacity: 0.8;
    margin-top: var(--gr-space-1);
}

/* --- Trust Bar extra ----------------------------------------------------- */

.gr-trust-bar__star {
    color: var(--gr-gold);
    margin-left: 0.15rem;
}

.gr-trust-bar__stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: 0.15rem;
}
.gr-trust-bar__stars svg {
    flex-shrink: 0;
}


/* ==========================================================================
   CTA BAR (sotto trust bar)
   ========================================================================== */

.gr-cta-bar {
    background: var(--gr-gold);
    padding: 1rem 0;
}
.gr-cta-bar__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .gr-cta-bar__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}
.gr-cta-bar p {
    color: var(--gr-navy);
    font-weight: 500;
    margin: 0;
    font-size: var(--gr-text-sm);
}
.gr-cta-bar__actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}


/* ==========================================================================
   BRAND GRID (.gr-brand-grid)
   ========================================================================== */

.gr-brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gr-space-6);
    align-items: center;
}

/* Homepage: max 2 righe (12 brand su 6 colonne) */
.gr-brand-grid--home {
    max-height: none; /* controllato via PHP limitando il numero */
}

@media (max-width: 1023px) {
    .gr-brand-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 639px) {
    .gr-brand-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gr-space-4);
    }
}

.gr-brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform var(--gr-transition);
    padding: var(--gr-space-4);
}

.gr-brand-item:hover {
    transform: scale(1.05);
}

.gr-brand-item img {
    max-width: 80px;
    height: auto;
    margin-bottom: var(--gr-space-2);
}

.gr-brand-item span {
    font-size: var(--gr-text-sm);
    color: var(--gr-dark);
    font-weight: 500;
}

/* --- Brand extras -------------------------------------------------------- */

.gr-brand-grid--large {
    gap: var(--gr-space-8);
}

.gr-brand-item__logo {
    display: block;
    max-width: 120px;
    height: auto;
    margin: 0 auto 0.75rem;
}

.gr-brand-item__name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 0.75rem;
    background: var(--gr-navy);
    color: var(--gr-white);
    font-weight: 700;
    font-size: var(--gr-text-lg);
    border-radius: var(--gr-radius-sm);
}

.gr-brand-item__count {
    display: block;
    font-size: var(--gr-text-sm);
    color: var(--gr-gray);
    text-align: center;
}

.gr-brand-item__label {
    display: block;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.25rem;
    color: var(--gr-dark);
}

.gr-brand-item__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 0.75rem;
    background: var(--gr-navy);
    color: var(--gr-white);
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-3xl);
    font-weight: 700;
    border-radius: var(--gr-radius);
}


/* ==========================================================================
   TABS (.gr-tabs) — Homepage tabs veicoli
   ========================================================================== */

.gr-tabs {
    margin-bottom: var(--gr-space-6);
}

.gr-tabs__nav {
    display: flex;
    border-bottom: 2px solid var(--gr-border);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gr-tabs__nav button {
    padding: 12px 24px;
    border: none;
    background: transparent;
    font-weight: 600;
    color: var(--gr-gray);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    min-height: 44px;
    white-space: nowrap;
    transition: color var(--gr-transition),
                border-color var(--gr-transition);
}

.gr-tabs__nav button:hover {
    color: var(--gr-navy);
}

.gr-tabs__nav button[aria-selected="true"] {
    color: var(--gr-navy);
    border-bottom-color: var(--gr-gold);
}

.gr-tabs__panel {
    padding: var(--gr-space-8) 0;
}

.gr-tabs__panel[hidden] {
    display: none;
}

.gr-tabs__empty {
    text-align: center;
    padding: var(--gr-space-8) 0;
    color: var(--gr-gray);
}

/* --- Tabs homepage (.gr-tabs--home) — stile underline centrato ----------- */
/* Identico alle tabs della pagina veicolo, ma centrato per la homepage.     */
/* Scrollbar nascosto: scroll funziona su mobile ma non è visibile.          */

.gr-tabs--home .gr-tabs__nav {
    justify-content: center;
    scrollbar-width: none; /* Firefox */
}

.gr-tabs--home .gr-tabs__nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* --- Tabs extras --------------------------------------------------------- */

.gr-tabs__btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: var(--gr-text-base);
    cursor: pointer;
    color: var(--gr-gray);
    transition: var(--gr-transition);
    min-height: 44px;
}
.gr-tabs__btn:hover { color: var(--gr-dark); }
.gr-tabs__btn--active {
    color: var(--gr-navy);
    border-bottom-color: var(--gr-gold);
}

.gr-tabs__all-link {
    text-align: center;
    padding: var(--gr-space-8) 0;
}
.gr-tabs__all-link p {
    color: var(--gr-gray);
    margin-bottom: var(--gr-space-4);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.gr-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.gr-intro h2 {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-2xl);
    color: var(--gr-navy);
    margin-bottom: 1rem;
}
.gr-intro p {
    color: var(--gr-gray);
    line-height: 1.7;
}


/* ==========================================================================
   SECTION TITLE & CTA
   ========================================================================== */

.gr-section__title {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-3xl);
    color: var(--gr-navy);
    text-align: center;
    margin-bottom: var(--gr-space-8);
}

.gr-section__cta {
    text-align: center;
    margin-top: var(--gr-space-8);
}

/* --- Section header & subtitle ------------------------------------------- */

.gr-section__header {
    text-align: center;
    margin-bottom: var(--gr-space-8);
}
.gr-section__header .gr-section__title {
    margin-bottom: var(--gr-space-3);
}
.gr-section__subtitle {
    color: var(--gr-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Link arrow ---------------------------------------------------------- */

.gr-link-arrow {
    color: var(--gr-navy);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--gr-transition);
}
.gr-link-arrow:hover {
    color: var(--gr-gold);
}


/* ==========================================================================
   WHY US
   ========================================================================== */

.gr-why-us {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gr-space-8);
    align-items: center;
}
@media (min-width: 1024px) {
    .gr-why-us { grid-template-columns: 1fr 1fr; }
}

.gr-why-us__content h2 {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-3xl);
    color: var(--gr-navy);
    margin-bottom: var(--gr-space-6);
}

.gr-why-us__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gr-why-us__list li {
    margin-bottom: var(--gr-space-4);
    padding-left: 1.5rem;
    position: relative;
}
.gr-why-us__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background: var(--gr-gold);
    border-radius: 50%;
}
.gr-why-us__list strong {
    display: block;
    color: var(--gr-dark);
    margin-bottom: 0.25rem;
}
.gr-why-us__list p {
    color: var(--gr-gray);
    font-size: var(--gr-text-sm);
    margin: 0;
}

.gr-why-us__image img {
    width: 100%;
    height: auto;
    border-radius: var(--gr-radius);
}
.gr-why-us__placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--gr-light);
    border-radius: var(--gr-radius);
}

/* --- Why Us v2 (icon grid + image badge) --------------------------------- */

.gr-why-us__label {
    display: inline-block;
    font-size: var(--gr-text-sm);
    font-weight: 600;
    color: var(--gr-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--gr-space-3);
}

.gr-why-us__desc {
    color: var(--gr-gray);
    line-height: 1.7;
    margin-bottom: var(--gr-space-6);
}

.gr-why-us__features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gr-space-4);
}
@media (min-width: 640px) {
    .gr-why-us__features { grid-template-columns: 1fr 1fr; }
}

.gr-why-us__feature {
    display: flex;
    gap: var(--gr-space-3);
    align-items: flex-start;
}
.gr-why-us__feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--gr-light);
    border-radius: var(--gr-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gr-why-us__feature strong {
    display: block;
    color: var(--gr-dark);
    font-size: var(--gr-text-sm);
    margin-bottom: 0.15rem;
}
.gr-why-us__feature p {
    color: var(--gr-gray);
    font-size: var(--gr-text-xs);
    margin: 0;
}

.gr-why-us__image-wrap {
    position: relative;
}
.gr-why-us__image-wrap img {
    width: 100%;
    height: auto;
    border-radius: var(--gr-radius);
}
.gr-why-us__image-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background: var(--gr-navy);
    color: var(--gr-white);
    padding: 1rem 1.5rem;
    border-radius: var(--gr-radius-sm);
    text-align: center;
}
.gr-why-us__image-badge strong {
    display: block;
    font-size: var(--gr-text-2xl);
    font-family: var(--gr-font-heading);
    color: var(--gr-gold);
}
.gr-why-us__image-badge span {
    display: block;
    font-size: var(--gr-text-xs);
    margin-bottom: 0.25rem;
}
.gr-why-us__image-stars {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.gr-why-us__review-badge {
    margin-top: 1.5rem;
    background: var(--gr-white, #fff);
    border-radius: var(--gr-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid var(--gr-border);
}

.gr-why-us__review-badge img {
    width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   PREMIUM SCROLL (mobile horizontal scroll)
   ========================================================================== */

@media (max-width: 1023px) {
    .gr-premium-scroll {
        display: flex;
        overflow-x: auto;
        gap: var(--gr-gap);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    .gr-premium-scroll > * {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
}


/* ==========================================================================
   YACHT SECTION (.gr-yacht-section) — v2 con sfondo immagine
   ========================================================================== */

.gr-yacht-section {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: var(--gr-navy);
    padding: var(--gr-space-12) 0;
}

/* --- Immagine di sfondo -------------------------------------------------- */

.gr-yacht-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.gr-yacht-section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Overlay ------------------------------------------------------------- */
/* Senza immagine: nessun overlay (sfondo è navy solido) */
.gr-yacht-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
}

/* Con immagine: gradient bianco da sinistra per testo scuro leggibile */
.gr-yacht-section--has-bg .gr-yacht-section__overlay {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.85) 35%,
        rgba(255, 255, 255, 0.4) 65%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

/* Mobile: overlay più coprente per leggibilità */
@media (max-width: 767px) {
    .gr-yacht-section--has-bg .gr-yacht-section__overlay {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.88) 60%,
            rgba(255, 255, 255, 0.5) 100%
        );
    }
}

/* --- Content area -------------------------------------------------------- */

.gr-yacht-section__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding: var(--gr-space-8) 0;
}

/* --- Label sopra heading ------------------------------------------------- */

.gr-yacht-section__label {
    display: inline-block;
    font-size: var(--gr-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--gr-space-2);
}

/* Senza immagine: label gold su navy */
.gr-yacht-section .gr-yacht-section__label {
    color: var(--gr-gold);
}

/* Con immagine: gold-text su bianco (contrasto AA 4.56:1) */
.gr-yacht-section--has-bg .gr-yacht-section__label {
    color: var(--gr-gold-text);
}

/* --- Heading ------------------------------------------------------------- */

.gr-yacht-section__content h2 {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-3xl);
    font-weight: 700;
    font-style: normal;
    line-height: 1.15;
    margin-bottom: var(--gr-space-4);
}

@media (min-width: 1024px) {
    .gr-yacht-section__content h2 {
        font-size: var(--gr-text-4xl);
    }
}

/* Senza immagine: testo bianco */
.gr-yacht-section .gr-yacht-section__content h2 {
    color: var(--gr-white);
}

/* Con immagine: testo navy scuro */
.gr-yacht-section--has-bg .gr-yacht-section__content h2 {
    color: var(--gr-dark);
}

/* "Lusso" corsivo gold, display block */
.gr-yacht-section__content h2 em {
    display: block;
    font-family: var(--gr-font-heading);
    font-style: italic;
    font-weight: 700;
    color: var(--gr-gold);
    font-size: inherit;
}

.gr-yacht-section--has-bg .gr-yacht-section__content h2 em {
    color: var(--gr-gold-text);
}

/* --- Paragrafo ----------------------------------------------------------- */

.gr-yacht-section__content p {
    font-size: var(--gr-text-lg);
    line-height: 1.6;
    margin-bottom: var(--gr-space-6);
}

.gr-yacht-section .gr-yacht-section__content p {
    color: rgba(255, 255, 255, 0.9);
}

.gr-yacht-section--has-bg .gr-yacht-section__content p {
    color: var(--gr-gray);
}

/* --- Griglia 3 card yacht ------------------------------------------------ */

.gr-yacht-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gr-gap);
    margin: var(--gr-space-8) 0;
}

@media (min-width: 768px) {
    .gr-yacht-section__grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
    }

    .gr-yacht-section--has-bg .gr-yacht-section__content {
        max-width: 100%;
    }
}

/* Card senza immagine (navy bg): semi-trasparenti */
.gr-yacht-section .gr-yacht-section__grid .gr-card-vehicle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.gr-yacht-section .gr-yacht-section__grid .gr-card-vehicle__title,
.gr-yacht-section .gr-yacht-section__grid .gr-card-vehicle__price {
    color: var(--gr-white);
}

.gr-yacht-section .gr-yacht-section__grid .gr-card-vehicle__spec {
    color: rgba(255, 255, 255, 0.7);
}

/* Card con immagine: sfondo bianco, colori normali */
.gr-yacht-section--has-bg .gr-yacht-section__grid .gr-card-vehicle {
    background: var(--gr-white);
    border: 1px solid var(--gr-border);
    box-shadow: var(--gr-shadow);
}

.gr-yacht-section--has-bg .gr-yacht-section__grid .gr-card-vehicle__title {
    color: var(--gr-dark);
}

.gr-yacht-section--has-bg .gr-yacht-section__grid .gr-card-vehicle__price {
    color: var(--gr-price);
}

.gr-yacht-section--has-bg .gr-yacht-section__grid .gr-card-vehicle__spec {
    color: var(--gr-gray);
}

/* --- CTA centrato -------------------------------------------------------- */

.gr-yacht-section__cta {
    text-align: center;
    margin-top: var(--gr-space-4);
}


/* ==========================================================================
   SERVICE BOX (.gr-service-box)
   ========================================================================== */

.gr-service-box {
    background-color: var(--gr-white);
    border-radius: var(--gr-radius);
    padding: var(--gr-space-8);
    text-align: center;
    box-shadow: var(--gr-shadow);
    transition: box-shadow var(--gr-transition);
}

.gr-service-box:hover {
    box-shadow: var(--gr-shadow-md);
}

.gr-service-box__icon {
    font-size: 3rem;
    color: var(--gr-gold);
    margin-bottom: var(--gr-space-4);
    line-height: 1;
    display: flex;
    justify-content: center;
}

.gr-service-box__title {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-xl);
    margin-bottom: var(--gr-space-3);
    color: var(--gr-navy);
}

.gr-service-box__text {
    color: var(--gr-gray);
    font-size: var(--gr-text-base);
    line-height: 1.6;
}


/* ==========================================================================
   REVIEW CARD (.gr-review-card)
   ========================================================================== */

.gr-review-card {
    background-color: var(--gr-white);
    border-radius: var(--gr-radius);
    padding: var(--gr-space-6);
    box-shadow: var(--gr-shadow);
}

.gr-review-card__stars {
    color: var(--gr-gold);
    margin-bottom: var(--gr-space-3);
    font-size: var(--gr-text-lg);
}

.gr-review-card__text {
    font-style: italic;
    color: var(--gr-dark);
    margin-bottom: var(--gr-space-4);
    line-height: 1.6;
}

.gr-review-card__author {
    font-weight: 600;
    color: var(--gr-navy);
}

.gr-review-card__source {
    font-size: var(--gr-text-sm);
    color: var(--gr-gray);
    margin-top: var(--gr-space-1);
}

/* --- Review Card SVG stelle ---------------------------------------------- */

.gr-review-card__star--filled {
    color: var(--gr-gold);
}

.gr-review-card__star--empty {
    color: var(--gr-border);
}

.gr-review-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--gr-space-1);
}

/* --- Review Card extras -------------------------------------------------- */

.gr-review-card__quote p {
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}


/* ==========================================================================
   REVIEW CAROUSEL (CSS scroll-snap)
   ========================================================================== */

.gr-review-carousel {
    display: flex;
    gap: var(--gr-space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--gr-space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--gr-border) transparent;
}

.gr-review-carousel__item {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

.gr-review-carousel::-webkit-scrollbar {
    height: 6px;
}

.gr-review-carousel::-webkit-scrollbar-thumb {
    background-color: var(--gr-border);
    border-radius: 3px;
}

.gr-review-carousel > * {
    scroll-snap-align: start;
    flex: 0 0 calc(100% - var(--gr-space-4));
    min-width: 280px;
}

@media (min-width: 768px) {
    .gr-review-carousel > * {
        flex: 0 0 calc(50% - var(--gr-space-3));
    }
}

@media (min-width: 1024px) {
    .gr-review-carousel > * {
        flex: 0 0 calc(33.333% - var(--gr-space-4));
    }
}

/* --- Review Grid (3x2 instead of carousel) ------------------------------- */

.gr-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gr-gap);
}
@media (min-width: 640px) {
    .gr-review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .gr-review-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   CTA BANNER (.gr-cta-banner)
   ========================================================================== */

.gr-cta-banner {
    background-color: var(--gr-gold);
    padding: var(--gr-space-12) var(--gr-space-8);
    text-align: center;
    border-radius: var(--gr-radius);
}

.gr-cta-banner h2 {
    font-family: var(--gr-font-heading);
    color: var(--gr-navy);
    font-style: italic;
    margin-bottom: var(--gr-space-4);
}

.gr-cta-banner p {
    color: var(--gr-dark);
    max-width: 700px;
    margin-inline: auto;
    margin-bottom: var(--gr-space-6);
    line-height: 1.6;
}


/* ==========================================================================
   BLOG CARD (.gr-blog-card)
   ========================================================================== */

.gr-blog-card {
    border-radius: var(--gr-radius);
    overflow: hidden;
    box-shadow: var(--gr-shadow);
    background-color: var(--gr-white);
    transition: box-shadow var(--gr-transition),
                transform var(--gr-transition);
}

.gr-blog-card:hover {
    box-shadow: var(--gr-shadow-md);
    transform: translateY(-2px);
}

.gr-blog-card a {
    color: inherit;
    text-decoration: none;
}

.gr-blog-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.gr-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gr-transition);
}

.gr-blog-card:hover .gr-blog-card__image img {
    transform: scale(1.03);
}

.gr-blog-card__body {
    padding: var(--gr-space-5);
}

.gr-blog-card__category {
    font-size: var(--gr-text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gr-gold-text); /* Gold scuro per contrasto AA su bianco */
    font-weight: 600;
}

.gr-blog-card__title {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-lg);
    margin: var(--gr-space-2) 0;
    color: var(--gr-navy);
    line-height: 1.3;
}

.gr-blog-card__excerpt {
    font-size: var(--gr-text-sm);
    color: var(--gr-gray);
    line-height: 1.5;
}

/* --- Blog Card extras ---------------------------------------------------- */

.gr-blog-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.gr-blog-card__date {
    font-size: var(--gr-text-xs);
    color: var(--gr-gray);
}

/* Placeholder per blog card senza immagine */
.gr-blog-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gr-navy) 0%, #2a4f7a 100%);
    color: rgba(255, 255, 255, 0.25);
}

.gr-blog-card__placeholder span {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ==========================================================================
   HEADING UNDERLINE GOLD (.gr-section__title--underline)
   ========================================================================== */

.gr-section__title--underline {
    display: inline-block;
    position: relative;
    padding-bottom: var(--gr-space-4);
}

.gr-section__title--underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--gr-gold);
    border-radius: 2px;
}


/* ==========================================================================
   BLOG CARD ORIZZONTALE (.gr-blog-card--horizontal)
   ========================================================================== */

/* Griglia news 2×2 */
.gr-grid-news {
    gap: var(--gr-space-5);
}

/* Layout orizzontale: thumbnail a sinistra, testo a destra */
.gr-blog-card--horizontal .gr-blog-card__link {
    display: flex;
    flex-direction: row;
    height: 100%;
}

/* Thumbnail quadrata */
.gr-blog-card--horizontal .gr-blog-card__image {
    flex-shrink: 0;
    width: 120px;
    aspect-ratio: 1 / 1;
    border-radius: var(--gr-radius) 0 0 var(--gr-radius);
    overflow: hidden;
}

.gr-blog-card--horizontal .gr-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder quadrato */
.gr-blog-card--horizontal .gr-blog-card__placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Corpo testo */
.gr-blog-card--horizontal .gr-blog-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--gr-space-4);
    min-width: 0;
}

/* Titolo: max 2 righe */
.gr-blog-card--horizontal .gr-blog-card__title {
    font-size: var(--gr-text-base);
    margin: var(--gr-space-1) 0 var(--gr-space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Excerpt: max 2 righe */
.gr-blog-card--horizontal .gr-blog-card__excerpt {
    font-size: var(--gr-text-sm);
    color: var(--gr-gray);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Categoria badge */
.gr-blog-card--horizontal .gr-blog-card__category {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gr-gold-text);
    font-weight: 700;
}

/* Responsive: tablet+ thumbnail più grande */
@media (min-width: 640px) {
    .gr-blog-card--horizontal .gr-blog-card__image {
        width: 140px;
    }
}

/* Mobile: card compatta */
@media (max-width: 639px) {
    .gr-blog-card--horizontal .gr-blog-card__image {
        width: 100px;
    }

    .gr-blog-card--horizontal .gr-blog-card__body {
        padding: var(--gr-space-3);
    }

    .gr-blog-card--horizontal .gr-blog-card__title {
        font-size: var(--gr-text-sm);
    }

    .gr-blog-card--horizontal .gr-blog-card__excerpt {
        display: none;
    }
}

/* Riduzione movimento */
@media (prefers-reduced-motion: reduce) {
    .gr-blog-card--horizontal:hover {
        transform: none;
    }

    .gr-blog-card--horizontal:hover .gr-blog-card__image img {
        transform: none;
    }
}


/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.gr-newsletter {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.gr-newsletter h2 {
    font-family: var(--gr-font-heading);
    font-size: var(--gr-text-2xl);
    color: var(--gr-navy);
    margin-bottom: 0.75rem;
}
.gr-newsletter p {
    color: var(--gr-gray);
    margin-bottom: var(--gr-space-6);
}

.gr-newsletter__form {}

.gr-newsletter__field {
    display: flex;
    gap: 0.5rem;
}
.gr-newsletter__field input[type="email"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gr-border);
    border-radius: var(--gr-radius-sm);
    font-size: var(--gr-text-base);
    min-height: 44px;
}
.gr-newsletter__field input[type="email"]:focus {
    border-color: var(--gr-navy);
    outline: 3px solid var(--gr-gold);
    outline-offset: 2px;
}

/* Checkbox consenso GDPR */
.gr-newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: var(--gr-text-sm);
    color: var(--gr-gray);
}
.gr-newsletter__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--gr-gold);
    cursor: pointer;
}
.gr-newsletter__consent label {
    cursor: pointer;
    line-height: 1.4;
}
.gr-newsletter__consent a {
    color: var(--gr-navy);
    text-decoration: underline;
}

/* --- Newsletter dark section --------------------------------------------- */

.gr-newsletter-section {
    background: var(--gr-navy);
    padding: var(--gr-space-12) 0;
}
.gr-newsletter-section .gr-newsletter h2 {
    color: var(--gr-white);
}
.gr-newsletter-section .gr-newsletter p {
    color: rgba(255,255,255,0.85);
}
.gr-newsletter-section .gr-newsletter__field input[type="email"] {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: var(--gr-white);
}
.gr-newsletter-section .gr-newsletter__field input[type="email"]::placeholder {
    color: rgba(255,255,255,0.7);
}
.gr-newsletter-section .gr-newsletter__field input[type="email"]:focus {
    border-color: var(--gr-gold);
    outline-color: var(--gr-gold);
}
.gr-newsletter-section .gr-newsletter__consent {
    color: rgba(255,255,255,0.85);
}
.gr-newsletter-section .gr-newsletter__consent a {
    color: var(--gr-gold);
}


/* ==========================================================================
   WP SOCIAL NINJA — Sezione recensioni homepage (#recensioni)
   Stile e layout gestiti INTERAMENTE dal plugin.
   Aggiungere qui SOLO ritocchi minimi dopo verifica visiva.
   ========================================================================== */