/* ================================================================
   Redes Entre Noticias — Frontend CSS
   ================================================================ */

/* ── Reset / Base ─────────────────────────────────────────────── */
.ren-standalone-page,
.ren-inline-wrap {
    --ren-accent:   #1d6fa4;
    --ren-bg:       #0f1923;
    --ren-text:     #ffffff;
    --ren-radius:   8px;
    --ren-max-w:    560px;
    --ren-card-p:   2rem 1.5rem;
    --ren-gap:      0.75rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Standalone page: full-screen centered */
.ren-standalone-page {
    background: var(--ren-bg);
    color:      var(--ren-text);
    min-height: 100vh;
    margin:     0;
    padding:    0;
}

.ren-page-wrap {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem 1rem;
    box-sizing:      border-box;
}

/* Inline embed via shortcode / block */
.ren-inline-wrap {
    background: var(--ren-bg);
    color:      var(--ren-text);
    padding:    2rem 1rem;
    border-radius: 12px;
    overflow: hidden;
}

/* ── Card ─────────────────────────────────────────────────────── */
.ren-card {
    width:      100%;
    max-width:  var(--ren-max-w);
    margin:     0 auto;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        var(--ren-gap);
}

/* ── Avatar ───────────────────────────────────────────────────── */
.ren-avatar-wrap {
    margin-bottom: 0.5rem;
}

.ren-avatar {
    width:         120px;
    height:        120px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--ren-accent);
    box-shadow:    0 0 0 4px rgba(255,255,255,.08);
    display:       block;
}

/* ── Name / Bio ───────────────────────────────────────────────── */
.ren-profile-name {
    font-size:    1.25rem;
    font-weight:  700;
    margin:       0;
    text-align:   center;
    line-height:  1.3;
    color:        var(--ren-text);
}

.ren-bio {
    font-size:   0.95rem;
    line-height: 1.6;
    text-align:  center;
    opacity:     0.85;
    max-width:   480px;
    margin:      0;
    color:       var(--ren-text);
}

/* ── Links nav ────────────────────────────────────────────────── */
.ren-links {
    width:          100%;
    display:        flex;
    flex-direction: column;
    gap:            var(--ren-gap);
    margin-top:     0.5rem;
}

/* ── Buttons ─────────────────────────────────────────────────────
   Three style variants: .ren-btn-filled | .ren-btn-outline | .ren-btn-soft
   ─────────────────────────────────────────────────────────────── */
.ren-link-btn {
    display:          flex;
    align-items:      center;
    gap:              0.6rem;
    width:            100%;
    padding:          0.75rem 1.2rem;
    border-radius:    var(--ren-radius);
    text-decoration:  none;
    font-size:        0.95rem;
    font-weight:      600;
    transition:       transform .15s ease, filter .15s ease, opacity .15s ease;
    position:         relative;
    overflow:         hidden;
    box-sizing:       border-box;
    cursor:           pointer;
}

.ren-link-btn:hover {
    transform: translateY(-2px);
    filter:    brightness(1.12);
}

.ren-link-btn:active {
    transform: translateY(0);
    filter:    brightness(.95);
}

/* Filled (default) */
.ren-btn-filled .ren-link-btn {
    background: var(--ren-btn-color, var(--ren-accent));
    color:      #fff;
    border:     2px solid transparent;
}

/* Outline */
.ren-btn-outline .ren-link-btn {
    background: transparent;
    color:      var(--ren-btn-color, var(--ren-accent));
    border:     2px solid var(--ren-btn-color, var(--ren-accent));
}

/* Soft (semi-transparent fill) */
.ren-btn-soft .ren-link-btn {
    background: color-mix(in srgb, var(--ren-btn-color, var(--ren-accent)) 18%, transparent);
    color:      var(--ren-btn-color, var(--ren-accent));
    border:     2px solid color-mix(in srgb, var(--ren-btn-color, var(--ren-accent)) 35%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .ren-btn-soft .ren-link-btn {
        background: rgba(29, 111, 164, 0.18);
        border-color: rgba(29, 111, 164, 0.35);
    }
}

/* ── Button icon ──────────────────────────────────────────────── */
.ren-btn-icon {
    flex-shrink: 0;
    width:       20px;
    height:      20px;
    display:     flex;
    align-items: center;
}

.ren-btn-icon svg {
    width:  100%;
    height: 100%;
}

/* ── Button label ─────────────────────────────────────────────── */
.ren-btn-label {
    flex: 1;
    text-align: center;
}

/* When there's an icon, align label slightly left-of-center */
.ren-btn-icon + .ren-btn-label {
    text-align: left;
}

/* ── Thumbnail ────────────────────────────────────────────────── */
.ren-btn-thumb {
    flex-shrink: 0;
    margin-left: auto;
}

.ren-btn-thumb img {
    width:         48px;
    height:        48px;
    object-fit:    cover;
    border-radius: calc(var(--ren-radius) - 2px);
    display:       block;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ren-avatar {
        width:  96px;
        height: 96px;
    }
    .ren-card {
        gap: 0.6rem;
    }
}

/* ── Utilities ────────────────────────────────────────────────── */
.ren-standalone-page * { box-sizing: border-box; }