/* ==========================================================================
   s-loop-13 — Treatment Card (Grid / List)
   親コンテナに .view-list を付けるとリスト表示に切り替わる
   ========================================================================== */

/* ---------- Article wrapper (subgrid: 7 rows) ---------- */
.s-loop-13 {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.s-loop-13:hover {
    opacity: 0.85;
}

/* ---------- Image area ---------- */
.s-loop-13__image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--color-gray-lighter);
    overflow: hidden;
}

.s-loop-13__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.s-loop-13__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -- Square variant -- */
.s-loop-13--square .s-loop-13__image {
    aspect-ratio: 1 / 1;
}

.s-loop-13--square {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* -- Placeholder (no thumbnail) -- */
.s-loop-13__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, var(--color-bg-sub), var(--color-primary-light));
}

.s-loop-13__placeholder-icon {
    font-size: var(--font-size-5-xl);
    color: var(--color-gray-lighter);
}

/* ---------- Favorite button ---------- */
.s-loop-13__favorite {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    z-index: 10;
}

/* ---------- Badge group (image overlay) ---------- */
.s-loop-13__badges {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-xs);
}

/* ---------- Content area (subgrid: 6 rows) ---------- */
.s-loop-13__content {
    grid-row: span 6;
    display: grid;
    grid-template-rows: subgrid;
    padding-inline: var(--space-2-xl);
    padding-block: var(--space-xl) var(--space-2-xl);
}

/* Reset margins — subgrid controls spacing */
:is(.s-loop-13__content) > * {
    margin: 0;
}

/* -- Category badge -- */
.s-loop-13__category {
    grid-row: 1;
    align-self: end;
}

/* -- Title -- */
.s-loop-13__title {
    grid-row: 2;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    align-self: start;
}

.s-loop-13__title a {
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-normal);
}

.s-loop-13__title a:hover {
    opacity: 0.6;
}

/* -- Description -- */
.s-loop-13__description {
    grid-row: 3;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Concern tags -- */
.s-loop-13__concerns {
    grid-row: 4;
    align-self: end;
}

/* -- Info area (price etc.) -- */
/* -- Downtime（呼び出し側からの補足・任意） -- */
.s-loop-13__downtime {
    margin: var(--space-2-xs) 0 0;
    font-size: var(--font-size-3-xs);
    color: var(--color-text-light);
    line-height: var(--line-height-tight);
}

.s-loop-13__info {
    grid-row: 5;
    display: flex;
    flex-direction: column;
    align-self: end;
}

/* -- Price row -- */
.s-loop-13__price {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
}

.s-loop-13__price-icon {
    font-size: var(--font-size-xl);
    color: var(--color-gray-lighter);
}

.s-loop-13__price-label {
    color: var(--color-text-light);
}

.s-loop-13__price-value {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.s-loop-13__price-tax {
    color: var(--color-text-light);
    font-size: var(--font-size-3-xs);
}

/* -- Special prices -- */
.s-loop-13__special-prices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-xs);
    margin-top: var(--space-xs);
}

.s-loop-13__special-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.s-loop-13__special-price {
    font-weight: var(--font-weight-bold);
}

.s-loop-13__special-price--initial {
    color: var(--color-badge-initial);
}

.s-loop-13__special-price--monitor {
    color: var(--color-badge-monitor);
}

.s-loop-13__special-price--limited {
    color: var(--color-badge-limited);
}

.s-loop-13__special-tax {
    color: var(--color-text-light);
    font-size: var(--font-size-3-xs);
}

/* -- Footer (detail link) -- */
.s-loop-13__footer {
    grid-row: 6;
    padding-top: var(--space-xl);
    align-self: end;
}

/* ==========================================================================
   List view — parent .view-list toggles horizontal layout
   ========================================================================== */
.view-list .s-loop-13 {
    display: flex;
    flex-direction: row;
    grid-row: auto;
    border-radius: var(--radius-md);
    margin-bottom: 0;
}

.view-list .s-loop-13__image {
    width: var(--thumb-xl);
    flex-shrink: 0;
    aspect-ratio: auto;
    min-height: var(--thumb-lg);
}

.view-list .s-loop-13__placeholder-icon {
    font-size: var(--font-size-3-xl);
}

.view-list .s-loop-13__badges {
    top: var(--space-3-xs);
    left: var(--space-3-xs);
    right: auto;
    flex-direction: column;
}

.view-list .s-loop-13__badges .c-badge-01 {
    font-size: var(--font-size-3-xs);
    padding: var(--space-4-xs) var(--space-3-xs);
}

.view-list .s-loop-13__content {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    padding: var(--space-md) var(--space-xl);
}

.view-list .s-loop-13__category {
    margin-bottom: var(--space-3-xs);
}

.view-list .s-loop-13__category .c-badge-01 {
    padding: var(--space-4-xs) var(--space-xs);
    font-size: var(--font-size-3-xs);
}

.view-list .s-loop-13__title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3-xs);
}

.view-list .s-loop-13__title a {
    /* 施術カードのタイトルは省略しない（共通ルール）。リスト表示でも全文表示する。 */
    overflow-wrap: anywhere;
}

.view-list .s-loop-13__description {
    font-size: var(--font-size-3-xs);
    margin-bottom: var(--space-xs);
    -webkit-line-clamp: 1;
    display: none;
}

@container (min-width: 600px) {
    .view-list .s-loop-13__description {
        display: -webkit-box;
    }
}

.view-list .s-loop-13__concerns .c-tag-01__group {
    gap: var(--space-3-xs);
    margin-bottom: var(--space-xs);
}

.view-list .s-loop-13__concerns .c-tag-01 {
    padding: var(--space-4-xs) var(--space-3-xs);
    font-size: var(--font-size-3-xs);
}

.view-list .s-loop-13__info {
    padding-top: var(--space-xs);
    border-top: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-xl);
}

.view-list .s-loop-13__price {
    font-size: var(--font-size-3-xs);
    gap: var(--space-3-xs);
}

/* リスト表示では __info が横並びになるため、特別価格の上余白をリセットして通常価格と揃える */
.view-list .s-loop-13__special-prices {
    margin-top: 0;
}

.view-list .s-loop-13__price-icon {
    font-size: var(--font-size-sm);
}

.view-list .s-loop-13__footer {
    padding-top: var(--space-xs);
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-list .s-loop-13__footer-price {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.view-list .s-loop-13__footer a {
    font-size: var(--font-size-3-xs);
}

/* ==========================================================================
   Parent grid container (subgrid-aware)
   ========================================================================== */
.s-loop-13-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: var(--space-3-xl);
    row-gap: 0;
}

/* Row gap between card groups (every 7 rows = 1 card) */
.s-loop-13-grid > .s-loop-13 {
    margin-bottom: var(--space-3-xl);
}

@container (min-width: 600px) {
    .s-loop-13-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 800px) {
    .s-loop-13-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* List view grid override */
.view-list.s-loop-13-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
}