/* ============================================================
   Phone — HOME page (Home/Index)
   Loaded phone-only via @section Styles in Views/Home/Index.cshtml
   (<link media="(max-width: 48em)">). Applies at <= 48em automatically.
   ============================================================ */

/* ---- Welcome hero ---- */
.welcome-hero {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    min-height: 0;                /* drop the 30rem desktop min-height */
}

/* Scale the oversized desktop title down so it fits a phone and long
   guild names don't overflow */
.welcome-title {
    font-size: 2rem;
}

/* ---- Hero card row ---- */
/* One column on a phone. Two cards side by side leave neither wide enough to read, and the grid's
   auto-placement still fills them in the same order — survey first when one is open. */
.welcome-cards {
    grid-template-columns: minmax(0, 1fr);
}

/* ---- Survey card ---- */
/* Let long button labels and the meta row wrap instead of overflowing */
.survey-card-actions {
    flex-wrap: wrap;
}
.survey-card-meta-row {
    flex-wrap: wrap;
}

/* ---- Blogs card ---- */
/* The title/author and the date stack rather than competing for a narrow row. */
.blog-post-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}