/* Public page sections and cards. Same rule as everywhere: logical properties only. */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-4); }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--color-muted); }

.card-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); justify-items: center; list-style: none; margin: 0; padding: 0; }
/* Each card fills its column but never gets absurdly wide when there are only one or two. */
.card-list > li { display: flex; inline-size: 100%; max-inline-size: 26rem; }
.card-list .card { inline-size: 100%; }

.card--link { display: flex; align-items: center; text-decoration: none; color: var(--color-slate); min-block-size: 5rem; transition: border-color 0.15s, box-shadow 0.15s; }
.card--link h3 { margin: 0; overflow-wrap: anywhere; }
.card--link:hover { border-color: var(--color-crimson); color: var(--color-crimson); }
.category-card { border-inline-start: 4px solid var(--color-crimson); }

.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-bg-soft); }
.card__img--empty { display: grid; place-items: center; }
.card__img--empty img { inline-size: 4rem; block-size: 4rem; opacity: 0.35; }
.card__body { padding: var(--space-3) var(--space-4) var(--space-4); overflow-wrap: anywhere; }
.card__body :is(h2, h3) { margin-block-end: var(--space-2); font-size: var(--text-lg); }
.card__body p:last-child { margin-block-end: 0; color: var(--color-muted); }
.card__meta { margin-block-end: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); }

.quote-band { background: var(--color-slate); color: var(--color-on-dark); text-align: center; padding-block: var(--space-6); }
.quote-band h2 { color: #fff; }
.quote-band p { color: #d5d9df; max-inline-size: 40rem; margin-inline: auto; }
.hero p { max-inline-size: 40rem; margin-inline: auto; }
.hero .btn { margin-block-start: var(--space-2); }

/* ---------- Listing and detail pages ---------- */
.page-intro { color: var(--color-muted); max-inline-size: 45rem; }
.catalogue-group { margin-block-end: var(--space-5); }
.catalogue-group h2 { margin-block-end: var(--space-3); padding-block-end: var(--space-2); border-block-end: 2px solid var(--color-border); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.chip { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; color: var(--color-slate); font-weight: 600; }
.chip:hover { border-color: var(--color-crimson); color: var(--color-crimson); }
.chip[aria-current="true"] { background: var(--color-slate); border-color: var(--color-slate); color: #fff; }

/* A whole card acts as one link: the title link is stretched over the card. */
.card--clickable { position: relative; }
.card--clickable:hover { border-color: var(--color-crimson); }
.stretched-link { color: inherit; text-decoration: none; }
.stretched-link::after { content: ''; position: absolute; inset: 0; }
.stretched-link:focus-visible { outline: none; }
.card--clickable:has(.stretched-link:focus-visible) { outline: 3px solid var(--color-crimson); outline-offset: 2px; }

.price { margin: 0 0 var(--space-2); font-weight: 800; color: var(--color-crimson); }
.price--quote { font-weight: 600; color: var(--color-muted); }
.price--large { font-size: var(--text-xl); }
.price__label { font-size: var(--text-md); font-weight: 600; color: var(--color-muted); }

.breadcrumb { margin-block-end: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
.detail { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 52rem) { .detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .detail--text { grid-template-columns: minmax(0, 46rem); } }
.detail__info h1 { margin-block-end: var(--space-3); overflow-wrap: anywhere; }
.detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-4); }
.prose { white-space: pre-line; overflow-wrap: anywhere; }

.gallery__main { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.gallery__main--empty { display: grid; place-items: center; }
.gallery__main--empty img { inline-size: 6rem; block-size: 6rem; opacity: 0.3; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }
.gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; }
.gallery__thumb img { inline-size: 5rem; block-size: 3.75rem; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--color-crimson); }

.not-found { text-align: center; padding-block: var(--space-6); }

/* On listing pages every card keeps the same width and lines up from the start edge
   (left in English, right in Arabic). The home page keeps its centred rows. */
#view .card-list { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); justify-items: stretch; }
#view .card-list > li { max-inline-size: none; }

/* ---------- Loading placeholders ---------- */
.skeleton { background: linear-gradient(90deg, var(--color-bg-soft) 25%, #e6e8ec 50%, var(--color-bg-soft) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius); }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.card.skeleton { min-block-size: 15rem; border: 0; box-shadow: none; }
.skeleton--title { block-size: 2.5rem; max-inline-size: 22rem; margin-block-end: var(--space-4); }
.skeleton--photo { aspect-ratio: 4 / 3; }
.skeleton--line { block-size: 1.2rem; margin-block-end: var(--space-2); }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.contact-card h2 { font-size: var(--text-lg); margin-block-end: var(--space-2); }
.contact-card p:last-child { margin-block-end: 0; }
.contact-card--main { border-inline-start: 4px solid var(--color-crimson); }
.contact-card__detail { margin-block-start: var(--space-3); color: var(--color-muted); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-block-end: var(--space-1); }