/*
 * Infinity Rise — Categories listing page. Builds on design-system.css tokens.
 * Banner mirrors the About banner; cards use the brand arrow icon.
 * Responsive across all breakpoints (1920 · 1536 · 1440 · 1280 · 1024 · 425 · 393).
 */

/* ---------- BANNER (matches the About banner) ---------- */
.irc-banner { position: relative; background-size: cover; background-position: center; color: var(--color-white);
	display: flex; align-items: center; min-height: var(--bnr-h);
	padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); }
.irc-banner__overlay { position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,0) 72%); }
.irc-banner__inner { position: relative; z-index: 1; }
.irc-banner__title { color: var(--color-white); font-size: var(--fs-h1); font-weight: 600; line-height: 1.08; margin: 0;
	text-shadow: 0 2px 14px rgba(0,0,0,.35); }
@media (min-width: 1025px) { .irc-banner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1537px) { .irc-banner { min-height: 600px; } }
@media (min-width: 1281px) and (max-width: 1536px) { .irc-banner { min-height: 480px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .irc-banner { min-height: 400px; } }
@media (max-width: 768px) { .irc-banner { align-items: flex-end; padding-left: 40px; padding-right: 20px; } }
@media (max-width: 425px) { .irc-banner { align-items: flex-end; } }
/* Mobile: "Categories" vertically centred (middle of the banner) but LEFT-aligned.
   Equal top/bottom padding so align-items:center lands it in the true middle
   (the base banner has a large top / small bottom padding that pushes it down). */
@media (max-width: 600px) { .irc-banner { align-items: center; justify-content: flex-start; text-align: left; padding: 40px 20px; } }

/* ---------- SECTION ---------- */
.irc { background: var(--color-bg-2); padding: var(--sec-pt) var(--sec-pr) var(--sec-pb) var(--sec-pl); }
.irc__intro { max-width: 820px; margin: 0 auto 48px; text-align: center; color: #4a4a4a; font-size: var(--fs-p); line-height: 1.6; }
.irc__intro p { margin: 0; }
.irc__empty { text-align: center; color: #6a6a6a; font-size: var(--fs-p); }

/* ---------- GRID + CARDS ---------- */
.irc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

.irc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.irc-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; background: var(--color-bg-1) center / cover no-repeat; overflow: hidden; }
/* Mobile: shorter (square) card image so the cards aren't so tall. */
@media (max-width: 600px) { .irc-card__media { aspect-ratio: 1 / 1; } }
.irc-card__ph { color: var(--color-secondary); font-weight: 600; font-size: var(--fs-h6); text-align: center; padding: 0 16px; }

.irc-card__bar { display: flex; align-items: center; gap: 14px; padding: 18px 0 0; }
.irc-card__arrow { flex: 0 0 auto; width: 34px; height: 34px; background: url('../images/categories/arrow-default.svg') center / contain no-repeat; transition: transform .25s ease; }
.irc-card:hover .irc-card__arrow { background-image: url('../images/categories/arrow-active.svg'); transform: translateX(2px); }
.irc-card__name { font-family: var(--font-primary); font-size: var(--fs-h6); font-weight: 500; line-height: 1.25; color: var(--color-black); }
.irc-card:hover .irc-card__name { color: var(--color-secondary); }
/* Category image: smooth zoom on hover (clipped within the frame). */
.irc-card__media::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform .5s ease; }
.irc-card:hover .irc-card__media::before { transform: scale(1.08); }
/* Mobile: smaller category-card name. */
@media (max-width: 600px) { .irc-card__name { font-size: 14px; } }

/* 1920: larger arrow + spacing; name sized so the longest one stays on one line. */
@media (min-width: 1537px) {
	.irc__grid { row-gap: 60px; }
	.irc-card__arrow { width: 40px; height: 40px; }
	.irc-card__bar { gap: 18px; padding-top: 24px; }
	/* Listing section padding. */
	.irc { padding: 120px 100px 70px; }
	/* Tighten How We Work top (vs listing) and bottom (vs the CTA band). */
	.lp-section.lp-how { padding-top: 20px; padding-bottom: 40px; }
	/* Tighten the gap between the CTA band and the footer (this page only). */
	.lp-cta { padding-bottom: 120px; }
}

/* 1536: larger arrow + name sized so the longest name stays on one line. */
@media (min-width: 1441px) and (max-width: 1536px) {
	.irc-card__arrow { width: 40px; height: 40px; }
	.irc-card__bar { gap: 16px; padding-top: 22px; }
}

/* ===================== RESPONSIVE ===================== */
/* 1280: narrower arrow (24x34). */
@media (min-width: 1025px) and (max-width: 1280px) { .irc-card__arrow { width: 24px; height: 34px; } }
@media (max-width: 1280px) { .irc__grid { gap: 24px; } }
@media (max-width: 1024px) { .irc__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .irc__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .irc-card__arrow { width: 24px; height: 24px; } }
@media (max-width: 425px)  { .irc__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Shared "How We Work" section ----------
   Typography, grid and dividers now come straight from home.css (enqueued on
   this page) so the section is identical to the homepage. Only the page-specific
   section spacing (gap vs the listing / CTA band) is tuned below. */

/* ---------- Reduce the gap between the listing and "How We Work" (responsive) ---------- */
@media (max-width: 1536px) { .irc { padding-bottom: 50px; } .lp-section.lp-how { padding-top: 30px; } }
@media (max-width: 1280px) { .irc { padding-bottom: 40px; } .lp-section.lp-how { padding-top: 30px; } }
@media (max-width: 768px)  { .irc { padding-bottom: 32px; } .lp-section.lp-how { padding-top: 24px; } }
@media (max-width: 425px)  { .irc { padding-bottom: 28px; } .lp-section.lp-how { padding-top: 20px; } }

/* 1536: more breathing room above How We Work. */
@media (min-width: 1441px) and (max-width: 1536px) { .lp-section.lp-how { padding-top: 80px; } }

/* 1536: CTA band spacing. */
@media (min-width: 1441px) and (max-width: 1536px) { .lp-cta { position: relative; background: transparent; padding: 0px 40px 120px; } }

/* 425: listing section padding (tighter top so the banner->listing gap matches the
   site rhythm, tighter bottom so the gap before How We Work is small). */
@media (max-width: 425px) { .irc { background: var(--color-bg-2); padding: 24px 20px 20px !important; } }

/* 425: How We Work section padding (tighter top to close the gap after the listing,
   tighter bottom to close the gap before the CTA band). */
@media (max-width: 425px) { .lp-section.lp-how { padding: 20px 20px 28px !important; } }

/* 425: CTA band padding (tighter top so the gap above the "Let's talk" card is small). */
@media (max-width: 425px) { .lp-cta { padding: 20px 20px 50px !important; } }


/* Mobile: uniform 24px top & bottom on content sections (overrides the bespoke
   .irc / .lp-how mobile paddings so the rhythm matches the rest of the site). */
@media (max-width: 768px) {
	.irc,
	.lp-section.lp-how { padding-top: 24px !important; padding-bottom: 24px !important; }
}
/* Mobile: align the banner title to the site scale (Home/About use 26). */
@media (max-width: 600px) { .irc-banner__title { font-size: 26px; } }