/* HyperKit — Icon Box
 *
 * Base widget plus the Liquid Glass preset.
 *
 * The glass effect layers four things to fake the Apple translucent material:
 *   1. backdrop-filter: blur + saturate the content behind the box
 *   2. a translucent base tint (white or smoke)
 *   3. an inset edge ring (box-shadow inset, not a border — so it lives
 *      at the very edge of the border-radius without eating into padding)
 *   4. a soft linear-gradient sheen at the top for the specular highlight
 *
 * Variables make tint/strength swappable via class.
 */

.hk-ib {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition:
        background-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 300ms ease,
        box-shadow 300ms ease,
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
        color 300ms ease;
    overflow: hidden; /* clip glass shine to the radius */
}

.hk-ib--linked {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.hk-ib--linked:hover,
.hk-ib--linked:focus {
    text-decoration: none;
    color: inherit;
}

/* The icon, title, and description all sit above the glass layers. */
.hk-ib-icon,
.hk-ib-title,
.hk-ib-desc {
    position: relative;
    z-index: 2;
}

.hk-ib-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
    transition: color 300ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hk-ib-icon i,
.hk-ib-icon svg {
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-ib-title {
    margin: 0 0 8px;
    line-height: 1.2;
    transition: color 300ms ease;
}
.hk-ib-title a {
    color: inherit;
    text-decoration: none;
    transition: color 300ms ease;
}
.hk-ib-title a:hover {
    text-decoration: none;
}

.hk-ib-desc {
    line-height: 1.5;
    margin: 0;
}

/* Full height so cards in an equal-height row/grid fill their column —
 * this is what lets a bottom-pinned arrow line up across the row. Resolves
 * to auto (no effect) when the parent isn't stretched. */
.hk-ib {
    height: 100%;
}

/* ============================================================
 * IMAGE MEDIA (alternative to the font icon)
 * ============================================================ */
.hk-ib-image {
    position: relative;
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    line-height: 0;
    max-width: 100%;
}
.hk-ib-image img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
 * ARROW BUTTON
 *
 * Decorative circular call-to-action. Colours, size and border are all
 * driven by the widget's Arrow controls; the values here are the resting
 * defaults so it looks right before any are touched.
 * ============================================================ */
.hk-ib-arrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    color: #1a1a1a;
    background-color: transparent;
    transition:
        color 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease,
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hk-ib-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}
.hk-ib:hover .hk-ib-arrow {
    transform: translateY(-1px);
}

/* Pin to the bottom edge. !important so it beats the per-widget
 * margin-top the "Spacing above" control emits — when pinned, free space
 * does the spacing instead. */
.hk-ib--arrow-bottom .hk-ib-arrow {
    margin-top: auto !important;
}

/* On smoked glass, match the icon/title white-out. */
.hk-ib--glass-dark .hk-ib-arrow {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
 * LIQUID GLASS PRESET
 *
 * The base preset — works on top of any background and produces a
 * frosted, translucent panel with a faint inner ring and top sheen.
 * Tint + strength variants below override the variables.
 * ============================================================ */
.hk-ib--glass {
    /* Defaults — overridden by tint and strength modifiers. */
    --hk-ib-glass-tint: rgba(255, 255, 255, 0.18);
    --hk-ib-glass-tint-hover: rgba(255, 255, 255, 0.26);
    --hk-ib-glass-blur: 18px;
    --hk-ib-glass-saturate: 180%;
    --hk-ib-glass-ring: rgba(255, 255, 255, 0.35);
    --hk-ib-glass-ring-inner: rgba(255, 255, 255, 0.08);
    --hk-ib-glass-shine: rgba(255, 255, 255, 0.25);
    --hk-ib-glass-shadow:
        0 1px 1px rgba(255, 255, 255, 0.18) inset,
        0 12px 32px rgba(0, 0, 0, 0.12);

    background-color: var(--hk-ib-glass-tint);
    /* Stacked filters: blur for depth, saturate for the slight color pop
     * Apple gets when content shows through frosted material. */
    -webkit-backdrop-filter: blur(var(--hk-ib-glass-blur)) saturate(var(--hk-ib-glass-saturate));
            backdrop-filter: blur(var(--hk-ib-glass-blur)) saturate(var(--hk-ib-glass-saturate));
    border: 0; /* the ring element handles the edge */
    box-shadow: var(--hk-ib-glass-shadow);
}

/* Edge ring — sits inside the rounded corners as a 1px highlight
 * (top/left) fading to a softer tone (bottom/right). Two stacked
 * inset shadows do this in one element. */
.hk-ib--glass .hk-ib-glass-ring {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 var(--hk-ib-glass-ring),
        inset 0 -1px 0 var(--hk-ib-glass-ring-inner),
        inset 1px 0 0 var(--hk-ib-glass-ring-inner),
        inset -1px 0 0 var(--hk-ib-glass-ring-inner);
}

/* Specular sheen across the top third of the box. */
.hk-ib--glass .hk-ib-glass-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--hk-ib-glass-shine) 0%,
        transparent 35%,
        transparent 100%
    );
    opacity: 0.55;
    mix-blend-mode: screen;
}

/* Hover lift — defaults to on via the lift modifier. */
.hk-ib--glass-lift {
    transition:
        background-color 350ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 350ms ease;
}
.hk-ib--glass-lift:hover {
    background-color: var(--hk-ib-glass-tint-hover);
    transform: translateY(-3px);
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.22) inset,
        0 18px 40px rgba(0, 0, 0, 0.18);
}

/* TINT VARIANTS */

/* Light — works on photos, dark hero sections, colorful gradients. */
.hk-ib--glass-light {
    --hk-ib-glass-tint: rgba(255, 255, 255, 0.18);
    --hk-ib-glass-tint-hover: rgba(255, 255, 255, 0.26);
    --hk-ib-glass-ring: rgba(255, 255, 255, 0.4);
    --hk-ib-glass-ring-inner: rgba(255, 255, 255, 0.08);
    --hk-ib-glass-shine: rgba(255, 255, 255, 0.3);
}

/* Dark — smoked glass, works on light backgrounds. */
.hk-ib--glass-dark {
    --hk-ib-glass-tint: rgba(15, 23, 42, 0.32);
    --hk-ib-glass-tint-hover: rgba(15, 23, 42, 0.42);
    --hk-ib-glass-ring: rgba(255, 255, 255, 0.18);
    --hk-ib-glass-ring-inner: rgba(0, 0, 0, 0.18);
    --hk-ib-glass-shine: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.hk-ib--glass-dark .hk-ib-title,
.hk-ib--glass-dark .hk-ib-desc,
.hk-ib--glass-dark .hk-ib-icon { color: #fff; }

/* Auto — uses currentColor + low opacity so it picks up whatever
 * color the parent has. The blur still does most of the work. */
.hk-ib--glass-auto {
    --hk-ib-glass-tint: color-mix(in srgb, currentColor 14%, transparent);
    --hk-ib-glass-tint-hover: color-mix(in srgb, currentColor 22%, transparent);
    --hk-ib-glass-ring: color-mix(in srgb, currentColor 35%, transparent);
    --hk-ib-glass-ring-inner: color-mix(in srgb, currentColor 8%, transparent);
    --hk-ib-glass-shine: color-mix(in srgb, currentColor 22%, transparent);
}

/* STRENGTH VARIANTS — control the blur amount. */
.hk-ib--glass-strength-subtle { --hk-ib-glass-blur: 8px;  --hk-ib-glass-saturate: 140%; }
.hk-ib--glass-strength-medium { --hk-ib-glass-blur: 18px; --hk-ib-glass-saturate: 180%; }
.hk-ib--glass-strength-heavy  { --hk-ib-glass-blur: 32px; --hk-ib-glass-saturate: 200%; }

/* Browsers without backdrop-filter fall back to a solid translucent
 * panel — looks decent, just no real blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hk-ib--glass {
        background-color: rgba(255, 255, 255, 0.85);
    }
    .hk-ib--glass-dark {
        background-color: rgba(15, 23, 42, 0.85);
    }
}

/* Reduce motion — respect the OS preference. */
@media (prefers-reduced-motion: reduce) {
    .hk-ib,
    .hk-ib-icon,
    .hk-ib-icon i,
    .hk-ib-icon svg,
    .hk-ib-image img,
    .hk-ib-arrow,
    .hk-ib-title,
    .hk-ib--glass-lift {
        transition: none !important;
    }
    .hk-ib--glass-lift:hover {
        transform: none !important;
    }
}