/* components.css — buttons, eyebrow, arrow links, social links, floating contact, icon sprite */

/* ---------------------------------------------------------------------
   Icon sprite — kept renderable (not display:none) so its SVG filters work
   --------------------------------------------------------------------- */
/* logo tinting — the sprite filters flood with these two tokens (used by the home page
   brand grid, the brand cards and the detail-template logo rows) */
.icon-sprite__flood--rest { flood-color: var(--color-text-muted); }
.icon-sprite__flood--gold { flood-color: var(--color-accent); }

.icon-sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   Button
   --------------------------------------------------------------------- */
.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-block-size: var(--btn-height);
    padding-block: var(--space-sm);
    padding-inline: var(--space-lg);
    border: var(--hairline) solid transparent;
    border-radius: var(--radius-button);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-button);
    line-height: var(--lh-snug);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--transition-fast),
        background-position var(--transition-slow),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}
.btn:focus-visible { outline: var(--rule) solid var(--color-primary); outline-offset: var(--focus-offset); }
/* the visual button is 40px (46px for --lg); the tap target stays 44px (Fix 10) */
.btn::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--touch-target);
    transform: translateY(-50%);
}
.btn--lg::after { content: none; }

.btn__icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    transition: transform var(--transition-base);
}

/* Primary — metallic gold; the sheen travels across on hover */
.btn--primary {
    background-color: var(--color-primary);
    background-image: var(--gradient-gold);
    background-size: 220% 100%;
    background-position: 100% 0;
    color: var(--color-text-inverse);
}
.btn--primary:active { background-image: none; background-color: var(--color-primary-deep); }

/* Secondary — hairline outline, fills with a gold wash on hover */
.btn--secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Ghost — text-only gold action */
.btn--ghost {
    background-color: transparent;
    color: var(--color-accent);
    padding-inline: var(--space-sm);
}

.btn--lg { min-block-size: var(--btn-height-lg); padding-inline: var(--space-xl); font-size: var(--fs-md); }

/* ---------------------------------------------------------------------
   Shared status popup — native dialog supplies modal focus management
   --------------------------------------------------------------------- */
.popup {
    inline-size: min(92vw, 32rem);
    max-inline-size: min(92vw, 32rem);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--color-text);
}
.popup::backdrop { background-color: var(--color-backdrop); }
.popup__panel {
    display: grid;
    gap: var(--space-md);
    padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
    background-color: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-deep);
}
.popup__status {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    color: var(--color-accent);
}
.popup__title { font-size: var(--fs-xl); line-height: var(--lh-tight); }
.popup__message {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}
.popup__close { justify-self: end; min-inline-size: 6rem; }
.popup--success { --popup-state-color: var(--color-success); }
.popup--pending { --popup-state-color: var(--color-warning); }
.popup--error { --popup-state-color: var(--color-danger); }
.popup__status { color: var(--popup-state-color, var(--color-accent)); }

@media (hover: hover) {
    .btn--primary:hover { background-position: 0 0; box-shadow: var(--shadow-glow-gold); }
    .btn--secondary:hover { background-color: var(--color-accent-wash); border-color: var(--color-border-strong); color: var(--color-accent-highlight); }
    .btn--ghost:hover { color: var(--color-accent-highlight); }
    .btn:hover .btn__icon--arrow { transform: translateX(calc(var(--space-xs) * var(--dir-sign))); }
}

/* Action groups — stack full-width on small screens */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.actions > .btn { flex: 1 1 100%; }

@media (min-width: 576px) {
    .actions > .btn { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   Eyebrow — small-caps label above titles
   --------------------------------------------------------------------- */
.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* ---------------------------------------------------------------------
   Arrow link — gold text link with a trailing arrow (label in its own span)
   --------------------------------------------------------------------- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--touch-target);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-button);
    color: var(--color-accent);
    transition: color var(--transition-fast);
}
.link-arrow__icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .link-arrow:hover { color: var(--color-accent-highlight); }
    .link-arrow:hover .link-arrow__icon { transform: translateX(calc(var(--space-xs) * var(--dir-sign))); }
}

/* Directional icons mirror in RTL (engineering §9) */
[dir="rtl"] .icon--directional { transform: scaleX(-1); }

/* ---------------------------------------------------------------------
   Social links — 44x44 icon buttons, 44px centre-to-centre (Fix 9)
   --------------------------------------------------------------------- */
.social-links {
    display: flex;
    flex-wrap: wrap;
}
.social-links__link {
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    color: var(--color-accent);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.social-links__icon { inline-size: var(--icon-md); block-size: var(--icon-md); }

@media (hover: hover) {
    .social-links__link:hover { color: var(--color-accent-highlight); background-color: var(--color-accent-wash); }
}

/* ---------------------------------------------------------------------
   Floating contact — WhatsApp + back to top, raised layer (below header)
   --------------------------------------------------------------------- */
.floating-contact {
    position: fixed;
    inset-block-end: var(--space-lg);
    inset-inline-end: var(--space-md);
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-sm);
}
.floating-contact__btn {
    display: grid;
    place-items: center;
    inline-size: var(--btn-height-lg);
    block-size: var(--btn-height-lg);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-deep);
    transition: transform var(--transition-base), background-position var(--transition-slow), border-color var(--transition-fast), color var(--transition-fast);
}
.floating-contact__icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }

.floating-contact__btn--whatsapp {
    background-color: var(--color-primary);
    background-image: var(--gradient-gold);
    background-size: 220% 100%;
    background-position: 100% 0;
    color: var(--color-text-inverse);
}
.floating-contact__btn--top {
    background-color: var(--color-surface-2);
    border: var(--hairline) solid var(--color-border);
    color: var(--color-accent);
}
.floating-contact__btn--top:not([hidden]) { animation: floating-in var(--transition-slow) both; }

@keyframes floating-in {
    from { opacity: 0; transform: translateY(var(--space-sm)); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) {
    .floating-contact__btn--whatsapp:hover { background-position: 0 0; transform: translateY(calc(var(--space-xs) * -1)); }
    .floating-contact__btn--top:hover { border-color: var(--color-border-strong); color: var(--color-accent-highlight); transform: translateY(calc(var(--space-xs) * -1)); }
}

@media (min-width: 768px) {
    .floating-contact { inset-block-end: var(--space-xl); inset-inline-end: var(--space-lg); }
}

/* ---------------------------------------------------------------------
   Reveal — staggered fade-up (js/shared/animations.js adds .is-revealed).
   Hidden state applies only when scripting is on and motion is allowed.
   --------------------------------------------------------------------- */
[data-reveal] {
    transition:
        opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * var(--stagger));
}

/* screen only: print and non-scrolling renderers always get the content */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    [data-reveal]:not(.is-revealed) {
        opacity: 0;
        transform: translateY(var(--space-lg));
    }
}

/* ---------------------------------------------------------------------
   Card — design1a card style: bordered, 8px corners, on the deepest surface.
   Hover: lift, one uniform gold frame (border + 1px ring, so the rounded
   corners carry the same weight as the edges), soft gold glow, icon nudges.
   The link's ::after makes the whole card clickable.
   --------------------------------------------------------------------- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    block-size: 100%;
    padding-block: var(--space-xl);
    padding-inline: var(--space-lg);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
    transition: transform var(--transition-slow), border-color var(--transition-base), box-shadow var(--transition-slow);
}
/* Borderless icon — the frame is now only a holder; the icon carries the weight.
   The sprite draws with a 1.5px non-scaling stroke, so it stays hairline-thin at 64px. */
.card__icon-frame {
    display: grid;
    place-items: center;
    margin-block-end: var(--space-xs);
    color: var(--color-accent);
}
.card__icon {
    inline-size: var(--icon-2xl);
    block-size: var(--icon-2xl);
    transition: transform var(--transition-slow), color var(--transition-base);
}
.card__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}
.card__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}
.card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--touch-target);
    margin-block-start: auto;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-button);
    color: var(--color-accent);
    transition: color var(--transition-fast);
}
.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after {
    outline: var(--rule) solid var(--color-primary);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-card);
}
.card__link-icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(calc(var(--space-xs) * -1));
        border-color: var(--color-border-strong);
        box-shadow: var(--shadow-ring-gold), var(--shadow-glow-gold);
    }
    .card:hover .card__icon { transform: translateY(calc(var(--space-xs) / -2)) scale(1.06); color: var(--color-accent-highlight); }
    .card:hover .card__link { color: var(--color-accent-highlight); }
    .card:hover .card__link-icon { transform: translateX(calc(var(--space-xs) * var(--dir-sign))); }
}

/* ---------------------------------------------------------------------
   Chip — compact secondary link with an icon
   --------------------------------------------------------------------- */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--touch-target);
    padding-inline: var(--space-md);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.chip__icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    color: var(--color-accent);
}

@media (hover: hover) {
    .chip:hover {
        background-color: var(--color-accent-wash);
        border-color: var(--color-border-strong);
        color: var(--color-accent-highlight);
    }
}

/* ---------------------------------------------------------------------
   Photo — the design1a photo signature: a faint gold duotone plus a soft
   vignette, applied identically to every photo block (band, project and
   location cards).
   --------------------------------------------------------------------- */
.photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-surface);
}
.photo::before,
.photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.photo::before {
    background-color: var(--color-photo-tint);
    mix-blend-mode: color;
}
.photo::after { background: var(--gradient-vignette); }

/* ---------------------------------------------------------------------
   Card — media variant (project card): photo on top, sector badge, body
   --------------------------------------------------------------------- */
.card--media {
    padding: 0;
    gap: 0;
}
.card__media {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border-start-start-radius: calc(var(--radius-card) - var(--hairline));
    border-start-end-radius: calc(var(--radius-card) - var(--hairline));
}
.card__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.card__badge {
    position: absolute;
    inset-block-start: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: 2;
}
.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    inline-size: 100%;
    padding: var(--space-lg);
}
.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.card__meta-icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    color: var(--color-accent);
}

@media (hover: hover) {
    .card--media:hover .card__image { transform: scale(1.05); }
}

/* ---------------------------------------------------------------------
   Badge — small uppercase label on a dark translucent plate
   --------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-scrim-badge);
    border: var(--hairline) solid var(--color-border);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-button);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    color: var(--color-accent);
}