/* unique-blog.css - blog section matching gallery style */

/* Root */
.ub-section { padding: 56px 18px; background: linear-gradient(180deg,#ffffff,#f4fbff); }
.ub-header { max-width: 860px; margin:0 auto 30px; }
.ub-title { font-size: 34px; color:#47a0cc; font-weight:800; text-align:center; }
.ub-title span { color:#143a63; }
.ub-lead { text-align:center; color:#6b7b8b; margin-top:10px; }

/* Grid layout: hero left, masonry feed right */
.ub-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items:start; max-width:1220px; margin:0 auto; }

/* HERO */
.ub-hero { background: linear-gradient(180deg,#fff,#f6fbff); border-radius:14px; overflow:hidden; box-shadow: 0 18px 50px rgba(9,30,60,0.06); display:flex; flex-direction:column; min-height:420px; }
.ub-hero-media { position:relative; height:260px; overflow:hidden; }
.ub-hero-img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.ub-hero-badge { position:absolute; left:18px; top:18px; background: linear-gradient(135deg,#47a0cc,#47a0cc); color:#fff; padding:8px 12px; border-radius:999px; font-weight:700; box-shadow: 0 8px 24px rgba(56,157,255,0.18); }
.ub-hero-body { padding:20px 22px 26px; display:flex; flex-direction:column; gap:12px; }
.ub-meta { font-size:13px; color:#8897a6; }
.ub-hero-title { font-size:24px; margin:0; color:#143a63; }
.ub-hero-excerpt { color:#546574; margin:0 0 6px; }
.ub-hero-tags { display:flex; gap:8px; flex-wrap:wrap; }
.ub-tag { background: rgba(56,157,255,0.12); color:#0b63b8; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; }
.ub-hero-cta { margin-top:auto; display:flex; gap:10px; align-items:center; }
.ub-btn { padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:700; border:2px solid transparent; }
.ub-btn-primary { background: linear-gradient(135deg,#47a0cc,#47a0cc); color:#fff; box-shadow: 0 10px 30px rgba(56,157,255,0.18); }
.ub-btn-outline { background:transparent; border-color: #e6f2ff; color:#0b63b8; }

/* FEED (masonry-like column flow) */
.ub-feed { display:grid; grid-template-columns: 1fr; gap: 14px; align-content:start; }

/* card */
.ub-card { display:flex; gap:12px; align-items:flex-start; padding:12px; background: linear-gradient(180deg,#fff,#fbfdff); border-radius:12px; box-shadow: 0 12px 34px rgba(9,30,60,0.04); transition: transform .28s ease, box-shadow .28s ease; }
.ub-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(9,30,60,0.09); }
.ub-card-media img { width:140px; height:100px; object-fit:cover; border-radius:8px; display:block; }
.ub-card-body { flex:1; display:flex; flex-direction:column; gap:6px; }
.ub-card-title { font-size:16px; margin:0; color:#143a63; }
.ub-card-excerpt { margin:0; color:#57636b; font-size:14px; }
.ub-card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.ub-author { font-weight:700; color:#114b78; font-size:13px; }
.ub-read { color:#3e80a0; font-weight:700; text-decoration:none; }

/* large card variation */
.ub-card-large { grid-column: span 1; background: linear-gradient(180deg,#fff7f2,#fff); }
.ub-card-large .ub-card-media img { height:140px; }

/* subtle entrance animation */
.ub-card, .ub-hero { opacity:0; transform: translateY(18px) scale(0.995); animation: ub-fade-in 0.7s forwards ease; }
.ub-card:nth-child(1) { animation-delay: 0.08s; }
.ub-card:nth-child(2) { animation-delay: 0.14s; }
.ub-card:nth-child(3) { animation-delay: 0.20s; }
.ub-card:nth-child(4) { animation-delay: 0.26s; }

@keyframes ub-fade-in {
  to { opacity:1; transform: translateY(0) scale(1); }
}

/* Responsive */
@media (max-width: 992px) {
  .ub-grid { grid-template-columns: 1fr; gap:16px; }
  .ub-hero-media { height:220px; }
  .ub-hero { min-height: 360px; }
  .ub-card-media img { width:110px; height:80px; }
}

/* small helper */
.muted { color:#7b8b99; font-weight:700; letter-spacing:1px; text-transform:uppercase; }

.more-packages-link {
    font-size: 15px;
    font-weight: 600;
    color: #1a5fb4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: color 0.3s ease;
}

/* Arrow animation */
.more-packages-link span {
    font-size: 15px;
    transition: transform 0.25s ease;
}

.more-packages-link:hover span {
    transform: translateX(6px);
}

/* Text color on hover & focus */
.more-packages-link:hover,
.more-packages-link:focus {
    color: #136995;
    text-decoration: none !important;
}

/* Underline animation */
.more-packages-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #136995;
    transition: width 0.3s ease;
}

.more-packages-link:hover::after,
.more-packages-link:focus::after {
    width: 100%;
}